/* ============================================================================
   GEO — BLOQUES EDITABLES
   Estilos de los contenedores que el cliente puede insertar desde el editor.

   POR QUÉ UNA HOJA PROPIA (y no reutilizar inicio.css / contenido.css):
   el CSS de página se encola CONDICIONALMENTE por plantilla (functions.php).
   Si un bloque usara .contenido-photos y el cliente lo inserta en el Home, ese
   CSS no se cargaría y el bloque saldría sin estilos. Esta hoja se encola
   SIEMPRE (front y editor), es pequeña y se apoya en los tokens de global.css,
   así que cualquier bloque se ve igual en cualquier página.

   REGLA DE ORO: aquí NO se toca nada de las secciones existentes. Todos los
   selectores llevan el prefijo .geo-b- para que sea imposible pisar el diseño
   hecho desde Figma.
   ============================================================================ */

/* Los bloques mandan sobre los estilos genéricos de contenido: si no, una
   página normal (page.php) les metía subrayado a todos los enlaces. */
.geo-b a { text-decoration: none; }

/* El cliente escribe texto libre: un correo, una URL o un nombre compuesto sin
   espacios rompía la caja y, con overflow-x:hidden en body, el texto quedaba
   CORTADO e inalcanzable. Medido: "informacion.comercial@grupoempresarialoptical.com.co"
   pedía 419px dentro de 305px a 360px de ancho. Se hereda a todo el bloque. */
.geo-b, .geo-b * { overflow-wrap: anywhere; }
.geo-b__texto p, .geo-b-tarjeta__texto, .geo-b-icono__texto { hyphens: auto; }

/* Ritmo vertical común a todos los bloques */
.geo-b {
  --geo-b-pad-y: clamp(56px, 7vw, 120px);
  --geo-b-pad-x: clamp(20px, 5vw, 100px);
  position: relative;
  padding: var(--geo-b-pad-y) var(--geo-b-pad-x);
  box-sizing: border-box;
}
.geo-b__inner { max-width: 1761px; margin: 0 auto; }

/* Fondos */
.geo-b--claro  { background: var(--color-white); color: var(--color-black); }
.geo-b--oscuro { background: var(--color-black); color: var(--color-white); }
.geo-b--gris   { background: var(--color-gray-light); color: var(--color-black); }

/* Tipografía base de los bloques — misma familia y escala fluida del tema
   (referencia de diseño 1761px, igual que el resto: N px ≈ N/17.61 vw). */
.geo-b__titulo {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(26px, 2.27vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(16px, 1.5vw, 28px);
}
.geo-b__texto {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0;
}
.geo-b__texto p { margin: 0 0 1em; }
.geo-b__texto p:last-child { margin-bottom: 0; }

/* Alineación */
.geo-b--izq    { text-align: left; }
.geo-b--centro { text-align: center; }
.geo-b--centro .geo-b__inner--angosto { margin-left: auto; margin-right: auto; }
.geo-b__inner--angosto { max-width: 900px; }

/* ── 1. SECCIÓN DE TEXTO ─────────────────────────────────────────────────── */
.geo-b-texto__cta {
  display: inline-block;
  margin-top: clamp(20px, 2vw, 34px);
  padding: 14px 34px;
  border-radius: var(--btn-radius);
  background: var(--color-peach);
  color: var(--color-black);
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.geo-b-texto__cta:hover { opacity: 0.85; transform: translateY(-2px); }

/* ── 2. FOTO ANCHA (full-bleed) ──────────────────────────────────────────── */
.geo-b-foto { padding: 0; width: 100%; overflow: hidden; }
.geo-b-foto__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}
.geo-b-foto--alta .geo-b-foto__img   { aspect-ratio: 16 / 9;  height: 100%; }
.geo-b-foto--media .geo-b-foto__img  { aspect-ratio: 21 / 9;  height: 100%; }
.geo-b-foto--baja .geo-b-foto__img   { aspect-ratio: 3 / 1;   height: 100%; }
/* Título opcional encima de la foto */
.geo-b-foto__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 4vw, 72px);
  /* El degradado llega HASTA ARRIBA. Antes moría al 55% de la altura y en
     móvil el título quedaba por encima de esa marca: texto blanco sobre foto
     limpia (ilegible sobre cielo, bata blanca o pared clara). */
  background: linear-gradient(to top,
              rgba(0,0,0,0.72) 0%,
              rgba(0,0,0,0.45) 45%,
              rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}
.geo-b-foto__caption {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin: 0;
}

/* ── 3. GALERÍA (fila de fotos) ──────────────────────────────────────────── */
.geo-b-galeria__grid {
  display: grid;
  gap: clamp(10px, 1vw, 16px);
  grid-template-columns: repeat(var(--geo-cols, 3), minmax(0, 1fr));
}
.geo-b-galeria__item { position: relative; overflow: hidden; }
.geo-b-galeria__img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.geo-b-galeria__item:hover .geo-b-galeria__img { transform: scale(1.04); }

/* ── 4. TARJETAS ─────────────────────────────────────────────────────────── */
.geo-b-tarjetas__grid {
  display: grid;
  gap: clamp(14px, 1.4vw, 24px);
  grid-template-columns: repeat(var(--geo-cols, 3), minmax(0, 1fr));
}
.geo-b-tarjeta {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
}
.geo-b-tarjeta__media { position: relative; overflow: hidden; }
.geo-b-tarjeta__img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.geo-b-tarjeta:hover .geo-b-tarjeta__img { transform: scale(1.04); }
.geo-b-tarjeta__titulo {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 18px 0 8px;
}
.geo-b-tarjeta__texto {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(14px, 0.97vw, 17px);
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
}
.geo-b-tarjeta__mas {
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.geo-b-tarjeta:hover .geo-b-tarjeta__mas { text-decoration: underline; text-underline-offset: 4px; }

/* ── 5. FRASE DESTACADA ──────────────────────────────────────────────────── */
.geo-b-destacado__frase {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 1400px;
}
.geo-b--centro .geo-b-destacado__frase { margin-left: auto; margin-right: auto; }
.geo-b-destacado__autor {
  margin: clamp(14px, 1.4vw, 24px) 0 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(13px, 0.9vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── 6. FILA DE ÍCONOS / DATOS ───────────────────────────────────────────── */
.geo-b-iconos__grid {
  display: grid;
  gap: clamp(24px, 3vw, 56px);
  grid-template-columns: repeat(var(--geo-cols, 4), minmax(0, 1fr));
}
.geo-b-icono { text-align: center; }
.geo-b-icono__img { max-width: 64px; max-height: 64px; margin: 0 auto 18px; display: block; }
.geo-b-icono__titulo {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.geo-b-icono__texto {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
}

/* ── Responsive: todo colapsa con sensatez ───────────────────────────────── */
@media (max-width: 1024px) {
  .geo-b-galeria__grid,
  .geo-b-tarjetas__grid { grid-template-columns: repeat(min(var(--geo-cols, 3), 2), minmax(0, 1fr)); }
  .geo-b-iconos__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .geo-b-galeria__grid,
  .geo-b-tarjetas__grid,
  .geo-b-iconos__grid { grid-template-columns: 1fr; }
  /* Se redefinen LAS TRES manteniendo el orden alta > media > baja: antes solo
     se tocaba 'baja' y acababa siendo más alta que 'alta'. Además se le da
     margen a la foto para que el título de 2-3 líneas no se recorte. */
  .geo-b-foto--alta  .geo-b-foto__img { aspect-ratio: 4 / 5; }
  .geo-b-foto--media .geo-b-foto__img { aspect-ratio: 1 / 1; }
  .geo-b-foto--baja  .geo-b-foto__img { aspect-ratio: 4 / 3; }
  /* El título ocupa más proporción cuanto menor es la pantalla; sin esto
     overflow:hidden le cortaba la primera línea. */
  .geo-b-foto__caption { font-size: clamp(19px, 5.2vw, 30px); }
  .geo-b-foto__overlay { padding: 20px; }
}

/* ── Aviso en el editor cuando falta contenido ───────────────────────────── */
.geo-b__vacio {
  padding: 40px 24px;
  border: 1px dashed currentColor;
  opacity: 0.55;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 14px;
}


/* ── Zona editable: contenedor para los bloques NATIVOS de WordPress ────────
   Los bloques GEO traen su propio ancho y su padding, pero si el cliente añade
   un párrafo o un encabezado normal de Gutenberg salían pegados al borde de la
   pantalla. Esto les da la caja de lectura del tema sin tocar a los .geo-b. */
.geo-zona-editable > :not(.geo-b),
.geo-page--bloques > :not(.geo-b) {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 5vw, 32px);
  padding-right: clamp(20px, 5vw, 32px);
  box-sizing: border-box;
  font-family: var(--font-primary);
  line-height: 1.6;
}
.geo-zona-editable > :not(.geo-b):first-child { margin-top: clamp(40px, 6vw, 80px); }
.geo-zona-editable > :not(.geo-b):last-child  { margin-bottom: clamp(40px, 6vw, 80px); }

/* ── Bloque dentro de una ENTRADA de blog ───────────────────────────────────
   El cuerpo del single fija su propia tipografía (28px, letter-spacing 1.68px)
   y se heredaba dentro del bloque. Se re-afirma la del bloque con la
   especificidad necesaria; el resto de sus estilos ya son propios. */
.geo-single__body .geo-b,
.geo-single__body .geo-b__inner {
  font-size: initial;
  letter-spacing: normal;
  line-height: normal;
  text-align: inherit;
}
.geo-single__body .geo-b__texto,
.geo-single__body .geo-b__texto p {
  font-size: clamp(15px, 1.25vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}