/*
Theme Name: V21 Seguridad Privada
Theme URI: https://paginasmexico.com
Author: PáginasMX
Description: Tema a la medida de V21 Seguridad Privada, hecho por PáginasMX. Editable desde el editor de bloques.
Version: 1.0
Requires at least: 6.5
Tested up to: 7.1
Text Domain: pmx-v21-seguridad-privada
*/

/* ─────────────────────────────────────────────────────────────────────────
   Todo va con :where() o con clase propia. Sin :where(), una regla como
   .v21-root p{margin:0} se come los márgenes que el cliente pone desde el
   editor: gana por especificidad y el cliente cree que su cambio no sirvió.
   ───────────────────────────────────────────────────────────────────────── */

:where(.v21-root) { -webkit-font-smoothing: antialiased; }

.v21-root img { max-width: 100%; height: auto; }

/* ── Ritmo de secciones ──────────────────────────────────────────────── */

.v21-sec { padding-top: clamp(3.5rem, 8vw, 5.5rem); padding-bottom: clamp(3.5rem, 8vw, 5.5rem); padding-left: 1.25rem; padding-right: 1.25rem; position: relative; overflow: hidden; }
.v21-sec-corta { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.v21-marco { max-width: 1100px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.v21-centro { text-align: center; }
.v21-filete-sup { border-top: 1px solid rgba(59,130,246,0.18); }
.v21-filete-claro { border-top: 1px solid #e2e8f0; }

/* Texturas de fondo: rejilla táctica y diagonales. Decorativas, no editables. */
.v21-rejilla::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.v21-diagonal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: repeating-linear-gradient(135deg, rgba(59,130,246,0.045) 0px, rgba(59,130,246,0.045) 1px, transparent 1px, transparent 12px);
}

/* ── Cejillas y encabezados de sección ───────────────────────────────── */

.v21-cejilla {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: .25em;
  font-size: .8rem; color: #3b82f6; margin-bottom: .75rem;
}
.v21-sub { color: #64748b; font-size: .95rem; }
.v21-root .v21-sec h2 { margin-top: 0; }

/* ── Encabezado ──────────────────────────────────────────────────────── */

.v21-cab {
  position: sticky; top: 0; z-index: 50;
  background-color: rgba(6,13,26,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(59,130,246,.18);
  padding-top: .75rem; padding-bottom: .75rem; padding-left: 1.25rem; padding-right: 1.25rem;
}
.v21-cab-fila { max-width: 1180px; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.v21-pastilla { background-color: rgba(255,255,255,.95); border-radius: .75rem; padding: .35rem .7rem; display: inline-flex; align-items: center; }
.v21-pastilla img { height: 44px; width: auto; object-fit: contain; display: block; }
.v21-cab .wp-block-navigation { font-family: 'Rajdhani', 'Arial Narrow', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }
.v21-cab .wp-block-navigation a { color: #94a3b8; }
.v21-cab .wp-block-navigation a:hover { color: #ffffff; }
.v21-cab .wp-block-button__link { padding-top: .6rem; padding-bottom: .6rem; padding-left: 1.4rem; padding-right: 1.4rem; }

.v21-tricolor { height: 4px; background-image: linear-gradient(to right,#006847 33%,#ffffff 33%,#ffffff 66%,#CE1126 66%); }

/* ── Portada ─────────────────────────────────────────────────────────── */

.v21-hero { position: relative; }
.v21-hero.wp-block-cover { padding-top: clamp(4rem,10vw,6rem); padding-bottom: clamp(4rem,10vw,6rem); padding-left: 1.25rem; padding-right: 1.25rem; }
.v21-hero .wp-block-cover__inner-container { max-width: 720px; text-align: center; }
.v21-hero-logo { display: inline-flex; background-color: rgba(255,255,255,.95); border-radius: 1rem; padding: 1rem 2rem; margin-bottom: 2rem; box-shadow: 0 0 40px rgba(59,130,246,.22); }
.v21-hero-logo img { height: clamp(84px, 14vw, 132px); width: auto; object-fit: contain; display: block; }
.v21-root .v21-hero h1 { font-size: clamp(2.8rem, 9vw, 5.5rem); line-height: 1; letter-spacing: -.02em; margin-bottom: 1rem; color: #ffffff; }
.v21-root .v21-hero h1 strong { color: #3b82f6; font-weight: 700; }
.v21-lema { font-style: italic; color: #93c5fd; font-weight: 500; margin-bottom: 1.25rem; }
.v21-hero-txt { color: #94a3b8; max-width: 560px; margin-left: auto; margin-right: auto; font-size: .95rem; }
.v21-hero .wp-block-buttons { justify-content: center; margin-top: 2.25rem; }
/* Esquinas de mira: adorno de la portada */
.v21-hero::after {
  content: ""; position: absolute; inset: 22px; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(#3b82f6,#3b82f6), linear-gradient(#3b82f6,#3b82f6),
    linear-gradient(#3b82f6,#3b82f6), linear-gradient(#3b82f6,#3b82f6);
  background-repeat: no-repeat;
  background-size: 44px 2px, 2px 44px, 44px 2px, 2px 44px;
  background-position: left top, left top, right bottom, right bottom;
  opacity: .45;
}

/* ── Botones ─────────────────────────────────────────────────────────── */

.v21-root .wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.v21-root .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(59,130,246,.28); }
.v21-root .is-style-outline > .wp-block-button__link {
  background-color: transparent; color: #93c5fd;
  border-width: 1px; border-style: solid; border-color: rgba(59,130,246,.45);
}
.v21-root .is-style-outline > .wp-block-button__link:hover { border-color: #3b82f6; color: #ffffff; box-shadow: none; }

/* ── Rejillas de tarjetas ────────────────────────────────────────────── */

.v21-rejilla-2, .v21-rejilla-3, .v21-rejilla-4 { display: grid; gap: 1.25rem; }
.v21-rejilla-2 { grid-template-columns: 1fr; }
.v21-rejilla-3 { grid-template-columns: 1fr; }
.v21-rejilla-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
@media (min-width: 720px) {
  .v21-rejilla-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v21-rejilla-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .v21-rejilla-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.v21-rejilla-2 > .wp-block-group, .v21-rejilla-3 > .wp-block-group, .v21-rejilla-4 > .wp-block-group { margin: 0; }

/* Tarjeta clara (secciones de fondo claro) */
.v21-tarjeta {
  background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem;
  padding: 1.6rem; box-shadow: 0 1px 4px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.v21-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.10); }
.v21-root .v21-tarjeta h3 { color: #0f172a; font-size: 1.25rem; margin-top: 0; margin-bottom: .5rem; }
.v21-root .v21-tarjeta p { color: #64748b; font-size: .92rem; margin-bottom: 0; }
.v21-tarjeta-destacada { border-color: #bfdbfe; box-shadow: 0 1px 4px rgba(59,130,246,.12); }

/* Tarjeta oscura (secciones de fondo marino) */
.v21-tarjeta-oscura {
  background-color: #0a1628; border: 1px solid rgba(59,130,246,.14); border-radius: 1rem; padding: 1.5rem;
}
.v21-root .v21-tarjeta-oscura h3 { color: #ffffff; font-size: 1.15rem; margin-top: 0; margin-bottom: .45rem; }
.v21-root .v21-tarjeta-oscura p { color: #94a3b8; font-size: .92rem; margin-bottom: 0; }

/* ── Barra de permisos ───────────────────────────────────────────────── */

.v21-cred { text-align: center; }
.v21-root .v21-cred p:first-child {
  font-family: 'Rajdhani','Arial Narrow',sans-serif; font-weight: 700;
  font-size: 1.15rem; color: #e2e8f0; line-height: 1.2; margin-bottom: .35rem;
}
.v21-root .v21-cred p + p { font-size: .78rem; color: #64748b; margin-bottom: 0; }

/* ── Fichas (valores, clientes, cobertura) ───────────────────────────── */

.v21-fichas { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.v21-root .v21-fichas p {
  margin: 0; padding: .55rem 1.1rem; border-radius: 999px; font-size: .88rem;
  border: 1px solid rgba(59,130,246,.22); background-color: rgba(59,130,246,.07); color: #cbd5e1;
}
.v21-fichas-claras .v21-ficha, .v21-root .v21-fichas-claras p {
  border: 1px solid #e2e8f0; background-color: #ffffff; color: #334155;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}

/* ── Galería ─────────────────────────────────────────────────────────── */

.v21-galeria.wp-block-gallery { gap: .75rem; }
.v21-galeria .wp-block-image img { border-radius: .9rem; border: 1px solid rgba(59,130,246,.18); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ── Certificaciones ─────────────────────────────────────────────────── */

.v21-sellos { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-bottom: 2.5rem; }
.v21-sellos .wp-block-image { margin: 0; background-color: #ffffff; border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: 0 0 24px rgba(59,130,246,.18); }
.v21-sellos .wp-block-image img { height: 72px; width: auto; object-fit: contain; }
.v21-vinetas { display: grid; gap: .75rem; text-align: left; max-width: 780px; margin-left: auto; margin-right: auto; }
.v21-root .v21-vinetas p {
  margin: 0; background-color: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.12);
  border-radius: .8rem; padding: 1rem 1.15rem; color: #cbd5e1; font-size: .92rem;
  border-left-width: 3px; border-left-color: #3b82f6;
}

/* ── Nosotros ────────────────────────────────────────────────────────── */

.v21-mv { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 720px) { .v21-mv { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.v21-mv > .wp-block-group { background-color: #f0f7ff; border: 1px solid #bfdbfe; border-radius: .9rem; padding: 1.35rem; margin: 0; }
.v21-root .v21-mv h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .2em; color: #3b82f6;
  margin-top: 0; margin-bottom: .55rem;
}
.v21-root .v21-mv p { color: #475569; font-size: .9rem; margin-bottom: 0; }
.v21-root .v21-claro-txt h2 { color: #0f172a; }
.v21-root .v21-claro-txt p { color: #475569; }

/* ── Contacto y pie ──────────────────────────────────────────────────── */

.v21-contacto-datos { margin-top: 2rem; color: #94a3b8; font-size: .92rem; }
.v21-root .v21-contacto-datos p { margin-bottom: .35rem; }
.v21-pie { padding-top: 3rem; padding-bottom: 3rem; padding-left: 1.25rem; padding-right: 1.25rem; text-align: center; border-top: 1px solid rgba(59,130,246,.15); }
.v21-pie-tricolor { height: 4px; width: 220px; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; border-radius: 999px; background-image: linear-gradient(to right,#006847 33%,#ffffff 33%,#ffffff 66%,#CE1126 66%); }
.v21-root .v21-pie p { color: #64748b; font-size: .85rem; margin-bottom: .3rem; }

/* ── Dentro del editor ───────────────────────────────────────────────── */

.editor-styles-wrapper { background-color: #060d1a; }

/* ── Iconos ──────────────────────────────────────────────────────────── */

.v21-ico { display: inline-flex; align-items: center; justify-content: center; color: #3b82f6; }
.v21-ico svg { width: 26px; height: 26px; display: block; }
.v21-ico-caja {
  width: 48px; height: 48px; border-radius: .8rem; margin-bottom: 1rem;
  background-color: rgba(59,130,246,.10);
}
.v21-tarjeta .v21-ico-caja { background-color: #eff6ff; }
.v21-cred .v21-ico { margin-bottom: .6rem; }
.v21-centro .v21-ico-caja { margin-left: auto; margin-right: auto; }

/* ── Páginas interiores y entradas ───────────────────────────────────── */

.v21-interior { padding-top: 3.5rem; padding-bottom: 4.5rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.v21-root .v21-interior .wp-block-post-featured-image img { border-radius: 14px; }

/* ── Remates de composición ──────────────────────────────────────────── */

.v21-root .v21-rejilla-2 .wp-block-buttons,
.v21-root .v21-sec .wp-block-buttons { margin-top: 2.5rem; }
.v21-root .v21-tarjeta .wp-block-buttons,
.v21-root .v21-tarjeta-oscura .wp-block-buttons { margin-top: 1rem; }
.v21-root .v21-marco > h2 { margin-bottom: .5rem; }
.v21-root .v21-marco > .v21-cejilla { margin-bottom: .6rem; }
.v21-root .v21-hero .wp-block-buttons { margin-top: 2.25rem; }