/* ============================================================
   ACM Consulting 2026 - screen.css
   Paleta (nombres oficiales del proyecto):
   --celeste 0070C0  franjas CTA, botones, subtitulos
   --azul    023270  titulares, texto, cifras
   --azul-oscuro 011734  pie de sitio
   --blanco  FFFFFF  secciones
   --gris1   F0F2F3  secciones alternas, tarjetas de testimonios
   --gris2   E2E6E9  gris fuerte
   --gris3   D3D8DA  bordes
   --gris-texto 5C6B7D  texto secundario (descriptor de testimonios)
   --verde   02C285  acentos minimos
   Tipografia: Raleway titulares, Montserrat texto
   ============================================================ */

:root {
  --celeste: #0070C0;
  --azul: #023270;
  --azul-oscuro: #011734;
  --blanco: #FFFFFF;
  --gris1: #F0F2F3;
  --gris2: #E2E6E9;
  --gris3: #D3D8DA;
  --gris-texto: #5C6B7D;
  --gris-fuerte: #3D4A5A; /* un gris mas oscuro que --gris-texto: nombre del cliente en testimonios */
  --verde: #02C285;
  --verde-claro: #41D1A4; /* solo el remate (10 %) del degradado de los botones verdes */
  --negro: #000000;
  --radius: 14px;
  --sombra: 0 6px 24px rgba(2, 50, 112, .08);
  --ancho: 1140px;
  --titulos: "Raleway", "Segoe UI", sans-serif;
  --texto: "Montserrat", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--azul);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--titulos);
  color: var(--azul);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 800;
}
h1 { font-size: 2.7rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
a { color: var(--celeste); text-decoration: none; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }
.seccion-alterna { background: var(--gris1); }
.centrado { text-align: center; }
.kicker {
  color: var(--celeste);
  font-family: var(--titulos);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  margin-bottom: .6em;
  display: block;
}

/* ---------- Animacion de entrada (FadeInUp) ---------- */
.aparece {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .75s ease, transform .75s ease;
}
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aparece { opacity: 1; transform: none; transition: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: 14px 30px;
  border-radius: 999px;
  border: 2px solid var(--celeste);
  transition: all .18s ease;
  cursor: pointer;
}
.btn-primario { background: var(--celeste); color: #fff; }
.btn-primario:hover { background: var(--azul); border-color: var(--azul); }

/* Botones con flecha (Conversemos, Explorar recursos, Explorar servicios, Enviar):
   texto en Capital y minusculas, a la derecha un circulo blanco con una flecha verde
   que al pasar el raton crece un poco y se desplaza a la derecha.
   .btn-verde  degradado 90 % verde y 10 % hacia blanco; al pasar el raton se vuelve azul (misma
               reaccion que .btn-claro) y la flecha se queda verde
   .btn-claro  version secundaria clara (Explorar recursos)
   .btn-azul   correo en Contacto */
.btn-flecha {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.btn-flecha .flecha {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--verde);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1.2), color .22s ease, border-color .22s ease;
}
.btn-flecha .flecha svg { width: 15px; height: 15px; display: block; }
/* Los botones "Conversemos" llevan el celular escrito dentro del propio boton: quien
   duda no hace clic, pero si guarda el numero. Va asi en todo el sitio menos en el pie.
   Las dos lineas juntas miden menos que el circulo de la flecha, o sea que el boton no
   crece de alto. */
.btn-flecha .rotulo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.btn-flecha .rotulo .numero { font-family: var(--texto); font-weight: 600; font-size: .73rem; letter-spacing: .02em; opacity: .92; }
.btn-flecha:hover .flecha, .btn-flecha:focus-visible .flecha { transform: translateX(4px) scale(1.1); }
.btn-verde {
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde) 90%, var(--verde-claro) 100%);
  color: #fff;
}
.btn-verde:hover, .btn-verde:focus-visible { background: var(--azul); color: #fff; }
.btn-claro { background: #fff; color: var(--azul); border-color: var(--gris3); }
.btn-claro .flecha { border: 1.5px solid var(--gris3); }
.btn-claro:hover, .btn-claro:focus-visible { background: var(--azul); color: #fff; border-color: var(--azul); }
.btn-claro:hover .flecha, .btn-claro:focus-visible .flecha { border-color: #fff; }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover, .btn-azul:focus-visible { background: var(--celeste); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .btn-flecha .flecha { transition: none; }
  .btn-flecha:hover .flecha { transform: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--gris3);
  backdrop-filter: blur(6px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
.logo img { height: 34px; width: auto; display: block; }
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: .95rem;
}
.nav a { color: var(--azul); }
.nav a:hover { color: var(--celeste); }
/* boton "Conversemos" del header: el mismo boton verde con flecha, un poco mas bajo */
.nav .cta { margin-left: 4px; padding: 4px 4px 4px 18px; gap: 10px; font-size: .86rem; color: #fff; }
.nav .cta:hover { color: #fff; }
.nav .cta .flecha { width: 30px; height: 30px; }
.nav .cta .flecha svg { width: 13px; height: 13px; }
.nav .idioma {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--azul);
  border: 1px solid var(--gris3);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
}
.nav .idioma svg { width: 15px; height: 15px; }
.nav .idioma:hover { border-color: var(--celeste); color: var(--celeste); }
.dropdown { position: relative; }
.dropdown > a::after { content: " \25BE"; font-size: .75em; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 8px 0;
  display: none;
}
.dropdown:hover .dropdown-menu,
.dropdown.abierto .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 10px 18px; }
.dropdown-menu a:hover { background: var(--gris1); }
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.7rem;
  color: var(--azul);
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 64px; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
}
.hero h1 { font-size: 2.3rem; margin-bottom: .5em; }
.hero h1 .acento { color: var(--celeste); }
.hero h1 .negro { color: var(--negro); }
.hero .bajada { font-size: .98rem; max-width: 32em; }
.hero-botones { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

/* Composicion de la foto, calcada de la referencia (caja cuadrada de 810 unidades):
   foto      x 60-770  y 35-750   -> left 7.4%  top 4.3%  w 87.6% h 88.3%
   gris      x 490-800 y 0-300    -> left 60.5% top 0     w 38.3%
   puntos    x 540-780 y 368-552  -> left 66.7% top 45.4% w 29.6% h 22.7% (14 col x 9 filas)
   verde     x 92-202  y 690-800  -> left 11.4% top 85.2% w 13.6% */
.hero-foto { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.hero-foto .foto {
  position: absolute;
  z-index: 1;
  left: 7.4%;
  top: 4.3%;
  width: 87.6%;
  height: 88.3%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 26px 60px rgba(2, 50, 112, .16), 0 6px 16px rgba(2, 50, 112, .06);
}
.hero-foto::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 60.5%;
  top: 0;
  width: 38.3%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(240, 242, 243, .76);
}
.hero-foto .puntos {
  position: absolute;
  z-index: 2;
  left: 66.7%;
  top: 45.4%;
  width: 29.6%;
  height: 22.7%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect width='4' height='4' fill='white'/%3E%3C/svg%3E");
  background-size: calc(100% / 14) calc(100% / 9);
  background-repeat: repeat;
}
.hero-foto::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 11.4%;
  top: 85.2%;
  width: 13.6%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--verde);
}

/* ---------- Cifras: cuatro cajas de canto vivo, pegadas entre si, que se van oscureciendo
   en el orden de lectura (gris claro, celeste, azul, azul oscuro). Contadas asi cuentan una
   historia: cuanto llevamos, cuanto hemos hecho, hasta donde llego y en cuantos cultivos.
   El numero es el protagonista y cuenta desde 0 al verse (data-hasta). ---------- */
.cifras { background: var(--blanco); padding: 72px 0; }
.cifras-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.cifra-caja {
  position: relative;
  border-radius: 0;
  padding: 34px 26px 30px;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.cifra-caja.paso-1 { background: var(--gris1); color: var(--azul); }
.cifra-caja.paso-2 { background: var(--celeste); color: #fff; }
.cifra-caja.paso-3 { background: var(--azul); color: #fff; }
.cifra-caja.paso-4 { background: var(--azul-oscuro); color: #fff; }
/* Solo se redondean los cantos de afuera de la fila: la izquierda de la 1 y la derecha
   de la 4. Los cantos interiores, donde una caja toca a la otra, quedan a escuadra. */
.cifra-caja.paso-1 { border-radius: var(--radius) 0 0 var(--radius); }
.cifra-caja.paso-4 { border-radius: 0 var(--radius) var(--radius) 0; }
.cifra-caja .icono-cifra {
  position: absolute;
  top: 28px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cifra-caja.paso-1 .icono-cifra { background: rgba(2, 50, 112, .07); }
.cifra-caja .icono-cifra svg { width: 36px; height: 36px; }
.cifra-caja .num {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 4.4rem;
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* Variante de la fila de cifras cuando el numero es un rotulo ("N.º 1", "28 de 32")
   y no un contador: el mismo bloque, con el numero algo mas chico para que entre. */
.cifras-rotulo .cifra-caja .num { font-size: 3.1rem; }
.cifras-rotulo .cifra-caja { min-height: 300px; }
/* Cuando la fila va sobre seccion gris, la primera caja usa el gris fuerte
   para que no se confunda con el fondo. */
.seccion-alterna.cifras { background: var(--gris1); }
.seccion-alterna.cifras .cifra-caja.paso-1 { background: var(--gris2); }
.seccion-alterna.cifras .cifra-caja.paso-1 .icono-cifra { background: rgba(2, 50, 112, .09); }
.cifra-caja .que { font-family: var(--titulos); font-weight: 700; font-size: 1.08rem; line-height: 1.3; margin-top: 10px; }
.cifra-caja .detalle { font-size: .82rem; line-height: 1.55; opacity: .8; margin-top: 8px; }
.cifra-caja.paso-1 .detalle { color: var(--gris-texto); opacity: 1; }

/* ---------- Soluciones: dos tarjetas (empresas / bancos, fondos y multilaterales) ---------- */
.soluciones { background: var(--gris1); }
.soluciones h2 { text-align: center; margin-bottom: 36px; }
.soluciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.card-solucion {
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-solucion:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.card-solucion .foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gris1); }
.card-solucion .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-solucion .cuerpo { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.card-solucion h3 { font-size: 1.4rem; margin-bottom: .45em; }
.card-solucion p { font-size: .95rem; margin-bottom: 22px; }
.card-solucion .btn-flecha { align-self: flex-start; margin-top: auto; }

/* Icono con halo muy sutil detras */
.icono {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0, 112, 192, .07) 0%, rgba(0, 112, 192, .025) 55%, rgba(0, 112, 192, 0) 72%);
}
.icono svg { width: 46px; height: 46px; }

/* ---------- Clientes (marquesina continua: columnas de 3 logos, 5 a la vista) ---------- */
.clientes { padding: 72px 0 64px; background: var(--blanco); text-align: center; }
.clientes .kicker { margin-bottom: .3em; }
.clientes h2 { margin-bottom: 36px; }
.marquesina { overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.marquesina.arrastrando { cursor: grabbing; }
.marquesina-pista { display: flex; width: max-content; will-change: transform; }
.columna-logos { flex: 0 0 auto; width: 228px; display: flex; flex-direction: column; padding: 0 12px; }
.columna-logos .celda { height: 92px; display: flex; align-items: center; justify-content: center; }
/* Caja fija: object-fit reduce los logos grandes y agranda los chicos, para que todos
   ocupen lo mismo. Los archivos vienen recortados, sin margen blanco alrededor. */
.columna-logos img {
  width: 100%;
  max-width: 148px;
  height: 54px;
  object-fit: contain;
  pointer-events: none;
}

/* Sello Empresa B al cierre de la franja de clientes: presente en la portada, sin robar foco */
.sello-home {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 0;
  font-size: .86rem;
  color: var(--gris-texto);
}
.sello-home img { height: 46px; width: auto; }
.hero .sello-home { margin: 22px 0 0; }
.sello-home a { color: var(--azul); font-weight: 600; border-bottom: 1px solid var(--gris3); }
.sello-home a:hover { color: var(--celeste); border-color: var(--celeste); }

/* Slider con puntos (cultivos) */
.slider { position: relative; overflow: hidden; }
.slider-pista { display: flex; transition: transform .6s ease; }
.slide { flex: 0 0 100%; min-width: 100%; }
.slider-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.slider-puntos button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--gris3);
  padding: 0;
  cursor: pointer;
}
.slider-puntos button.activo { background: var(--celeste); }

/* ---------- Testimonios (2 x 2: frase corta con el nombre debajo, logo al costado
   y testimonio completo desplegable) ---------- */
.testimonios { background: var(--blanco); }
.testimonios h2 { text-align: center; margin-bottom: 40px; }
.testimonios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.testimonio {
  background: var(--gris1);
  border-radius: var(--radius);
  padding: 28px 30px 24px;
  color: var(--azul-oscuro);
  display: grid;
  grid-template-columns: 1fr 150px;
  /* El logo solo ocupa la fila de la frase: asi queda centrado a media altura
     del mensaje y no arrastrado hacia abajo por la fila del boton. */
  grid-template-areas: "frase autor" "boton ." "completo completo";
  gap: 14px 24px;
  align-items: center;
}
.testimonio .frase { grid-area: frase; align-self: start; }
.testimonio .comillas { width: 22px; height: auto; display: block; margin-bottom: 10px; }
/* La de cierre es la misma imagen girada 180 grados, al final de la frase y a la derecha */
.testimonio .comillas.cierre { transform: rotate(180deg); margin: 8px 0 0 auto; }
/* Jerarquia de la tarjeta, de mas fuerte a mas debil:
   frase (Raleway 800, --celeste) > nombre del cliente (Raleway 700, --gris-fuerte)
   > descriptor (Montserrat, --gris-texto) > testimonio completo (--gris-texto, pequeno).
   El boton de desplegar va en --azul. */
.testimonio .frase p { margin: 0; font-family: var(--titulos); font-weight: 800; font-size: 1.15rem; line-height: 1.45; color: var(--celeste); }
.testimonio .autor {
  grid-area: autor;
  /* Arriba, a la altura de las primeras lineas del mensaje, no a media altura */
  align-self: start;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonio .autor img { max-height: 54px; max-width: 130px; width: auto; height: auto; object-fit: contain; }
.testimonio cite {
  display: block;
  margin-top: 30px; /* el aire que antes ocupaba el filete verde */
  font-style: normal;
  font-family: var(--titulos);
  font-weight: 700;
  color: var(--gris-fuerte);
  font-size: .9rem;
  line-height: 1.3;
}
.testimonio cite small { display: block; font-weight: 500; color: var(--gris-texto); font-family: var(--texto); font-size: .78rem; line-height: 1.5; margin-top: 4px; }
.testimonio .desplegar {
  grid-area: boton;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .8rem;
  color: var(--azul);
}
.testimonio .desplegar .circulo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--azul);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.testimonio .desplegar svg { width: 12px; height: 12px; }
.testimonio .desplegar:hover .circulo { background: var(--azul); color: #fff; }
.testimonio.abierto .desplegar .circulo { transform: rotate(180deg); }
.testimonio .completo { grid-area: completo; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.testimonio .completo > div { overflow: hidden; }
.testimonio.abierto .completo { grid-template-rows: 1fr; }
.testimonio .completo blockquote { margin: 0; padding-top: 14px; border-top: 1px solid var(--gris3); font-size: .84rem; line-height: 1.7; color: var(--gris-texto); }
.testimonio .completo p { margin-bottom: .7em; }
.testimonio .completo p:last-child { margin-bottom: 0; }

/* ---------- Recursos: mosaico compacto del home (4 columnas, el mas reciente ocupa 2 x 2) ---------- */
.recursos { background: var(--gris1); text-align: center; }
.recursos h2 { margin-bottom: 32px; }
.recursos-destacados {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
  text-align: left;
  margin-bottom: 32px;
}
/* Celdas 16:9 como las portadas, para que la imagen se vea completa y no recortada */
.destacado {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--azul);
  color: #fff;
}
.destacado:first-child { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
.destacado .fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.destacado:hover .fondo { transform: scale(1.04); }
.destacado .velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 50, 112, .95) 0%, rgba(2, 50, 112, .55) 38%, rgba(2, 50, 112, 0) 70%);
}
.destacado .texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px 20px;
}
.destacado .etiqueta { color: #fff; border-color: rgba(255,255,255,.7); margin-bottom: 6px; display: inline-block; }
.destacado h3 { color: #fff; font-size: .86rem; margin: 0; line-height: 1.3; }
.destacado:first-child h3 { font-size: 1.4rem; }
.destacado:first-child .texto { padding: 26px 28px 28px; }

/* ---------- Recursos: tarjetas (pagina de recursos y blog) ---------- */
.recursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card-recurso {
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease;
}
.card-recurso:hover { box-shadow: var(--sombra); }
.card-recurso .miniatura {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--azul), var(--celeste));
  display: block;
}
.card-recurso .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-recurso .cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.etiqueta {
  align-self: flex-start;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--celeste);
  border: 1.5px solid var(--celeste);
  border-radius: 999px;
  padding: 3px 12px;
}
.card-recurso h3 { font-size: 1.05rem; margin: 0; }
.card-recurso h3 a { color: var(--azul); }
.card-recurso h3 a:hover { color: var(--celeste); }
.grupo-recursos { margin-bottom: 56px; }
.grupo-recursos h2 { margin-bottom: 24px; }

/* ---------- Franja de contacto (CTA, celeste) ---------- */
.franja-contacto { background: var(--celeste); color: #fff; padding: 56px 0; }
.franja-contacto .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.franja-contacto h2 { color: #fff; margin: 0 0 .2em; font-size: 1.7rem; }
.franja-contacto p { margin: 0; opacity: .92; max-width: 34em; }
/* El numero va escrito debajo del boton: quien duda no hace clic, pero si guarda el numero. */
.franja-accion { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }


/* ---------- Pie de sitio (azul oscuro) ---------- */
.pie-sitio { background: var(--azul-oscuro); color: #fff; padding: 64px 0 28px; font-size: .92rem; }
.pie-sitio a { color: #fff; }
.pie-sitio a:hover { color: var(--verde); }
.pie-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.pie-marca img { height: 40px; width: auto; display: block; margin-bottom: 18px; }
.pie-marca p { opacity: .85; max-width: 30em; font-size: .88rem; }
.pie-sitio h4 {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pie-sitio ul { list-style: none; margin: 0; padding: 0; }
.pie-sitio li { margin-bottom: 9px; }
.pie-contacto p { margin: 0 0 10px; opacity: .9; }
.pie-redes { display: flex; gap: 10px; margin-top: 8px; }
.pie-redes a {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pie-redes a:hover { background: var(--verde); }
.pie-redes svg { width: 20px; height: 20px; fill: var(--azul-oscuro); }
.pie-redes .correo svg { fill: none; stroke: var(--azul-oscuro); stroke-width: 1.8; }
/* Sellos oficiales bajo el correo de consultas, en la misma caja blanca que .pie-redes */
.pie-sellos { display: flex; gap: 10px; margin-top: 16px; }
.pie-sellos a {
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pie-sellos img { height: 46px; width: auto; display: block; }
/* Fila de contacto directo del pie: correo y telefono grandes con su frase encima */
.pie-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.22);
}
.pie-cta p { margin: 0 0 10px; opacity: .8; font-size: .88rem; }
/* El correo y el telefono van dentro de una caja blanca de bordes suaves, como los iconos de .pie-redes */
.pie-cta a {
  display: inline-block;
  background: #fff;
  color: var(--azul-oscuro);
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.15rem;
  word-break: break-word;
  transition: background .2s ease, color .2s ease;
}
.pie-cta a:hover { background: var(--verde); color: var(--azul-oscuro); }
.pie-legal {
  border-top: 1px solid rgba(255,255,255,.22);
  margin-top: 32px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .84rem;
  line-height: 1.4;
  opacity: .92;
}
.pie-legal .enlaces { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pie-legal .idioma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  padding: 6px 12px;
  line-height: 1;
}
.pie-legal .idioma svg { width: 14px; height: 14px; }

/* ---------- Paginas interiores ---------- */
.hero-pagina { background: var(--gris1); padding: 64px 0 56px; }
.hero-pagina h1 { font-size: 2.4rem; margin-bottom: .3em; }
.hero-pagina .bajada { max-width: 44em; font-size: 1.05rem; }

/* Sub-navegacion de Nosotros (ACM, equipo, sostenibilidad, IFAMA) */
.subnav { border-bottom: 1px solid var(--gris3); background: #fff; }
.subnav .wrap { display: flex; gap: 6px; overflow-x: auto; }
.subnav a {
  display: inline-block;
  padding: 16px 16px 14px;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .88rem;
  color: var(--azul);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.subnav a:hover { color: var(--celeste); }
.subnav a.activa { color: var(--celeste); border-bottom-color: var(--celeste); }


.lista-sectores { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.lista-sectores li {
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
}

/* ---------- Paginas de servicios ---------- */
/* Cada servicio es un desplegable sobre fondo blanco: icono a la izquierda, nombre a la
   derecha y, al abrirlo, el lema del portafolio y el resto del detalle. */
.bloque-servicio { background: var(--blanco); border-bottom: 1px solid var(--gris3); }
.servicio-cabecera { margin: 0; }
.servicio-cabecera button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  background: none;
  border: none;
  padding: 22px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.servicio-cabecera .nombre {
  flex: 1;
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--azul);
  transition: color .2s ease;
}
.servicio-cabecera button:hover .nombre { color: var(--celeste); }
.servicio-cabecera .circulo {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--gris3);
  color: var(--celeste);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.servicio-cabecera .circulo svg { width: 14px; height: 14px; }
.servicio-cabecera button:hover .circulo { background: var(--celeste); border-color: var(--celeste); color: #fff; }
.bloque-servicio.abierto .servicio-cabecera .circulo { transform: rotate(180deg); }
.servicio-detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.servicio-detalle > div { overflow: hidden; }
.bloque-servicio.abierto .servicio-detalle { grid-template-rows: 1fr; }
.bloque-servicio .ficha { padding-left: 98px; }
.bloque-servicio .servicio-detalle > div > :last-child { padding-bottom: 44px; }
@media (prefers-reduced-motion: reduce) {
  .servicio-detalle { transition: none; }
  .servicio-cabecera .circulo { transition: none; }
}
/* ---------- Ficha de servicio (version Fable, diapositiva 2 del pptx) ----------
   Cabecera con las cuatro fotos cuadradas, dos columnas debajo y, a la derecha,
   los seis componentes puestos sobre un anillo alrededor de la meta.
   Los componentes son botones: al elegir uno, el centro dice cual es. */
.ficha-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--gris3);
  margin-bottom: 34px;
}
.ficha-titulo {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.15;
  color: var(--azul);
  margin: 0;
}
.ficha-fotos { display: flex; gap: 10px; flex-shrink: 0; }
.ficha-fotos img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.ficha-cuerpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  margin-bottom: 44px;
}
.ficha-cuerpo h3 {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1.24rem;
  color: var(--azul);
  margin: 0 0 20px;
}
.ficha-razon { margin-bottom: 22px; }
.ficha-razon h4 {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1rem;
  color: var(--azul);
  margin: 0 0 5px;
}
.ficha-razon p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--gris-texto); }
.ficha-lleva { list-style: none; padding: 0; margin: 0; }
.ficha-lleva li { position: relative; padding-left: 22px; margin-bottom: 16px; }
.ficha-lleva li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--celeste);
}
.ficha-lleva b {
  display: block;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .95rem;
  color: var(--azul);
}
.ficha-lleva span { display: block; font-size: .84rem; line-height: 1.55; color: var(--gris-texto); }
.ficha-cuerpo-simple { grid-template-columns: 1fr; }
.ficha-razones { display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; }

/* La caja de la rueda se ajusta al anillo: antes media 560 px de alto con un anillo
   de 420, y esos 140 px sobrantes eran aire entre el titulo y las seis patas.
   Anillo de 380 y caja de 380: las patas se recolocan sobre el radio nuevo (190). */
.ficha-componentes h3 { margin-bottom: 6px; }
.rueda { position: relative; width: 1000px; max-width: 100%; height: 380px; margin: 0 auto; }
.rueda::before {          /* el anillo punteado sobre el que se apoyan los seis */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  border: 1px dashed var(--gris3);
  border-radius: 50%;
}
.rueda-centro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 6px var(--blanco), 0 0 0 8px var(--verde);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 22px;
  gap: 8px;
}
.rueda-rotulo {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde);
}
.rueda-frase {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--blanco);
}
.componente {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.componente .num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--celeste);
  color: var(--blanco);
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}
.componente .texto b {
  display: block;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .96rem;
  color: var(--azul);
  margin-bottom: 3px;
  transition: color .2s;
}
.componente .texto > span { display: block; font-size: .82rem; line-height: 1.5; color: var(--gris-texto); }
.componente:hover .num, .componente:focus-visible .num, .componente.activo .num {
  background: var(--azul);
  transform: scale(1.12);
}
.componente:hover .texto b, .componente:focus-visible .texto b, .componente.activo .texto b { color: var(--celeste); }
/* Los tres de la izquierda leen de derecha a izquierda, con el numero pegado al anillo */
.c1, .c2, .c3 { flex-direction: row-reverse; text-align: right; }
.componente .texto { width: 250px; }
.c1 { left: 70px; top: 58px; }
.c2 { left: 31px; top: 173px; }
.c3 { left: 70px; top: 288px; }
.c4 { left: 634px; top: 58px; }
.c5 { left: 673px; top: 173px; }
.c6 { left: 634px; top: 288px; }

/* ---------- Nosotros: equipo ---------- */
.grupo-equipo { margin-bottom: 56px; }
.grupo-equipo h3 {
  font-size: 1rem;
  color: var(--celeste);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 22px;
}
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.miembro {
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.miembro .foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 16px;
  background: var(--gris1);
}
.miembro h4 { font-size: 1.08rem; margin-bottom: .15em; }
/* Enlace a LinkedIn al costado del nombre. Mientras el href siga siendo el marcador
   PEGAR-URL el icono no se muestra, asi que la web se puede publicar a medio llenar. */
.miembro h4 .linkedin { display: inline-flex; vertical-align: middle; margin-left: 7px; color: var(--gris3); }
.miembro h4 .linkedin svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.miembro h4 .linkedin:hover { color: var(--celeste); }
.miembro h4 .linkedin[href="PEGAR-URL"] { display: none; }
.miembro .cargo { font-size: .85rem; color: var(--celeste); font-weight: 600; margin: 0 0 10px; }
.miembro .bio {
  font-size: .86rem;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.miembro .bio.abierta { display: block; -webkit-line-clamp: unset; }
.miembro .leer-mas {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 6px 0 0;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--celeste);
  cursor: pointer;
}
.miembro .leer-mas:hover { text-decoration: underline; }

/* ---------- Nosotros: ACM (mapa y cultivos) ---------- */
.mapa-alcance { text-align: center; }
.mapa-alcance img { width: 100%; max-width: 1000px; height: auto; display: block; margin: 8px auto 0; }
/* Tabla de cultivos: el grafico del portafolio, exportado del PPT en vector */
.tabla-cultivos { display: block; width: 100%; height: auto; }

.cultivos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.cultivo {
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: var(--radius);
  padding: 20px 10px 16px;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
}
.cultivo svg { width: 46px; height: 46px; display: block; margin: 0 auto 10px; }

/* ---------- Sostenibilidad: sellos (el certificado es el protagonista, solo) ---------- */
.sello-panel { padding: 64px 0; }
.sello-panel .wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sello-panel.invertido .wrap > :first-child { order: 2; }
.sello-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: var(--radius);
  padding: 44px 32px;
  min-height: 360px;
}
.sello-logos img { height: 290px; width: auto; }
.sello-panel h2 { font-size: 1.55rem; margin-bottom: .5em; }
.sello-panel p:last-child { margin-bottom: 0; }
.sello-panel .diploma {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .88rem;
}
.sello-panel .diploma svg { width: 14px; height: 14px; }

/* ---------- Nosotros: descripcion de ACM y alianzas ---------- */
/* Descripcion a la izquierda, foto del equipo a la derecha */
.descripcion-acm {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
  color: var(--gris-texto);
  font-size: 1.02rem;
  line-height: 1.75;
}
/* La primera frase entra grande, como bajada; los parrafos que siguen se quedan
   con el cuerpo de siempre y sin negritas. */
.descripcion-acm .entrada {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1.45;
  color: var(--azul);
  margin-bottom: .85em;
}
.descripcion-acm strong { color: var(--azul); font-weight: 700; }
.descripcion-acm .lista-sectores { margin-top: 14px; }
.descripcion-acm .texto > :last-child { margin-bottom: 0; }
.descripcion-acm .foto img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
}
.alianzas { text-align: center; }
.alianzas h2 { margin-bottom: 32px; }
/* Hoy son 4 alianzas (salieron ISAM y Swarm), asi que van 2 x 2.
   Si vuelven a ser 6, esto regresa a repeat(3, 1fr). */
.alianzas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.alianza {
  position: relative;
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: 18px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  outline: none;
}
.alianza img { width: 100%; max-width: 210px; height: 74px; object-fit: contain; transition: opacity .25s ease; }
.alianza .descripcion {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: inherit;
  background: rgba(240, 242, 243, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--azul);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.alianza:hover img, .alianza:focus-visible img, .alianza.activa img { opacity: .18; }
.alianza:hover .descripcion, .alianza:focus-visible .descripcion, .alianza.activa .descripcion { opacity: 1; }

/* ---------- IFAMA ---------- */
.ifama-intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.ifama-intro img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--sombra); display: block; }
.ifama-intro .destacada { font-size: 1.08rem; }
.ifama-intro .hero-botones { margin-top: 22px; }
/* El "save the date" oficial es vertical: no se recorta a 4/3 como las fotos */
.ifama-intro img.banner {
  aspect-ratio: auto;
  object-fit: contain;
  max-width: 360px;
  justify-self: center;
}
.ifama-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ifama-razon {
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
}
.ifama-razon .n {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--celeste);
  color: var(--celeste);
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ifama-razon h3 { font-size: 1.02rem; margin-bottom: .3em; }
.ifama-razon p { margin: 0; font-size: .9rem; }
.ifama-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ifama-foto { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--gris3); text-align: left; }
.ifama-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ifama-foto .pie { padding: 16px 20px 18px; font-size: .9rem; }
.ifama-foto .pie strong { display: block; font-family: var(--titulos); color: var(--azul); margin-bottom: 4px; }
.ifama-cta { text-align: center; }
.ifama-cta h2 { margin-bottom: .4em; }
.ifama-cta p { max-width: 40em; margin: 0 auto; }
.ifama-cta .hero-botones { justify-content: center; }

/* ---------- Contacto ---------- */
/* Contacto: el titular manda solo en la franja gris y todo lo demas vive en un
   unico panel blanco (mensaje, los dos botones, el celular escrito y la oficina). */
.contacto-panel {
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 40px;
  max-width: 760px;
  margin: 0 auto;
}
.contacto-panel .lead { font-size: 1.05rem; color: var(--gris-texto); margin: 0; max-width: 34em; }
.contacto-panel .hero-botones { margin-top: 24px; }
.contacto-panel .datos-oficina {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--gris3);
  font-size: .88rem;
  color: var(--gris-texto);
}
.contacto-panel .datos-oficina p { margin: 0 0 8px; }
.contacto-panel .datos-oficina p:last-child { margin-bottom: 0; }
.contacto-panel .datos-oficina a { color: var(--azul); font-weight: 600; }
.contacto-panel .datos-oficina a:hover { color: var(--celeste); }

/* Recursos: chips de tema y boton "ver mas" */
.filtros-recursos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filtros-recursos .chip {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--azul);
  background: #fff;
  border: 1px solid var(--gris3);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.filtros-recursos .chip:hover { border-color: var(--celeste); color: var(--celeste); }
.filtros-recursos .chip.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.acciones-recursos { display: flex; justify-content: center; margin-top: 34px; }
.sin-resultados { color: var(--gris-texto); font-size: .9rem; }
/* Sin esto el filtro no oculta nada: [hidden] del navegador pierde contra el display
   de .card-recurso y .acciones-recursos. */
.card-recurso[hidden], .acciones-recursos[hidden], .grupo-recursos[hidden] { display: none; }

/* ---------- Post ---------- */
/* Boton "Volver" fijo: se ve aunque se haga scroll dentro del articulo */
.volver {
  position: fixed;
  left: 20px;
  top: 92px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--azul);
  border: 1px solid var(--gris3);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .82rem;
  box-shadow: var(--sombra);
}
.volver svg { width: 14px; height: 14px; transform: rotate(180deg); }
.volver:hover { background: var(--celeste); color: #fff; border-color: var(--celeste); }
.relacionados { background: var(--gris1); padding: 64px 0; }
.relacionados h2 { text-align: center; margin-bottom: 28px; font-size: 1.6rem; }
.post-cabecera { background: var(--gris1); padding: 56px 0 40px; text-align: center; }
.post-cabecera h1 { max-width: 22em; margin: 0 auto .3em; }
.post-meta { color: var(--celeste); font-size: .9rem; }
.post-contenido { max-width: 720px; margin: 0 auto; padding: 48px 24px 72px; }
.post-contenido img { border-radius: 10px; }
.post-contenido h2 { font-size: 1.4rem; margin-top: 1.6em; }
.post-contenido h3 { font-size: 1.15rem; margin-top: 1.4em; }
.post-contenido p { line-height: 1.75; }
.post-contenido strong { color: var(--azul); font-weight: 700; }
.post-contenido ul { padding-left: 20px; }
.post-contenido li { line-height: 1.75; margin-bottom: 10px; }

/* Recursos de lectura dentro de un articulo. El texto no cambia: lo que cambia
   es el ritmo con el que se lee. Se usan con criterio, no en cada seccion. */
.post-contenido .entradilla { font-size: 1.1rem; color: var(--azul); }
.post-contenido .epigrafe {
  font-family: var(--titulos);
  font-style: italic;
  color: var(--gris-texto);
  border-left: 3px solid var(--gris3);
  padding-left: 18px;
  margin: 0 0 28px;
}
/* La frase clave del articulo, en grande. Misma jerarquia que la frase de un
   testimonio: Raleway 800 en celeste. Ojo, no llamarla "destacado": esa clase
   ya es la celda azul del mosaico de reportes del home. */
.post-contenido .frase-clave {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1.28rem;
  line-height: 1.45;
  color: var(--celeste);
  margin: 44px 0;
}

/* Esquemas: se dibujan con HTML, no con imagenes, para que se relean en movil
   y no pesen nada. Van en caja gris, como una figura del articulo. */
.post-contenido .esquema {
  background: var(--gris1);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  margin: 40px 0;
}
.post-contenido .esquema-titulo {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin: 0 0 18px;
}
.post-contenido .esquema-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.post-contenido .paso-caja {
  background: var(--blanco);
  border: 1px solid var(--gris3);
  border-radius: 10px;
  padding: 14px 14px 16px;
}
.post-contenido .paso-caja b {
  display: block;
  font-family: var(--titulos);
  color: var(--azul);
  font-size: .95rem;
  margin-bottom: 4px;
}
.post-contenido .paso-caja span {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gris-texto);
}
.post-contenido .paso-num {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: .8rem;
  color: var(--celeste);
  display: block;
  margin-bottom: 6px;
}
.post-contenido .esquema figcaption,
.post-contenido figcaption {
  font-size: .8rem;
  color: var(--gris-texto);
  margin-top: 14px;
}
.post-contenido .esquema-filas { display: grid; gap: 10px; }
.post-contenido .esquema-fila {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--blanco);
  border: 1px solid var(--gris3);
  border-radius: 10px;
  padding: 12px 16px;
}
.post-contenido .esquema-fila b { font-family: var(--titulos); color: var(--azul); font-size: .95rem; }
.post-contenido .esquema-fila span { font-size: .85rem; line-height: 1.55; color: var(--gris-texto); }

.post-destacada { max-width: 900px; margin: -20px auto 0; padding: 0 24px; }
.post-destacada img { width: 100%; border-radius: var(--radius); box-shadow: var(--sombra); }

/* Anchos de tarjetas del editor (Koenig) */
.kg-width-wide {
  position: relative;
  width: 85vw;
  max-width: 1040px;
  margin-left: calc(50% - 42.5vw);
  transform: translateX(calc(42.5vw - 50%));
}
.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---------- Paginas legales ---------- */
.texto-legal { max-width: 46em; padding: 8px 0 16px; }
.texto-legal h2 { font-size: 1.25rem; margin: 1.6em 0 .4em; }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p { margin: 0 0 1em; }
.texto-legal .nota-legal { color: var(--gris-texto); font-size: .9rem; margin-top: 2.4em; }

/* Pagina 404. Las dos salidas en fila, y la linea en ingles debajo porque un
   error de direccion le puede caer a un visitante de cualquiera de los dos idiomas. */
.error-salidas { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6em 0 2em; }
.error-ingles { color: var(--gris-texto); font-size: .95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .kg-width-wide { width: 100%; max-width: 100%; margin-left: 0; transform: none; }
  /* La rueda no cabe: los seis componentes pasan a lista y la meta va arriba */
  .ficha-cuerpo { grid-template-columns: 1fr; gap: 38px; }
  .ficha-cabecera { flex-direction: column; }
  .ficha-titulo { font-size: 1.8rem; }
  .rueda { width: auto; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
  .rueda::before { display: none; }
  .rueda-centro {
    position: static;
    margin: 0 0 8px;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    grid-column: 1 / -1;
    padding: 22px;
    box-shadow: none;
  }
  .componente { position: static; width: auto; flex-direction: row; text-align: left; }
  .componente .texto { width: auto; }
  .c1, .c2, .c3 { flex-direction: row; text-align: left; }
  .equipo-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-foto { max-width: 480px; margin: 0 auto; }
  .soluciones-grid { grid-template-columns: 1fr; }
  .cifras-grid { grid-template-columns: 1fr 1fr; }
  .cifra-caja { padding: 32px 30px 28px; min-height: 250px; }
  .cifra-caja.paso-1 { border-radius: var(--radius) 0 0 0; }
  .cifra-caja.paso-2 { border-radius: 0 var(--radius) 0 0; }
  .cifra-caja.paso-3 { border-radius: 0 0 0 var(--radius); }
  .cifra-caja.paso-4 { border-radius: 0 0 var(--radius) 0; }
  .cifra-caja .num { font-size: 4.6rem; }
  .cifra-caja .que { font-size: 1.2rem; }
  .cifra-caja .detalle { font-size: .86rem; }
  .testimonios-grid { grid-template-columns: 1fr; }
  .servicio-cabecera .nombre { font-size: 1.35rem; }
  .bloque-servicio .ficha { padding-left: 0; }
  .recursos-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .recursos-destacados { grid-template-columns: 1fr 1fr; }
  .destacado:first-child { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 9; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .columna-logos .celda { height: 80px; }
  .cultivos-grid { grid-template-columns: repeat(3, 1fr); }
  .descripcion-acm { grid-template-columns: 1fr; gap: 28px; }
  .sello-panel .wrap { grid-template-columns: 1fr; }
  .sello-panel.invertido .wrap > :first-child { order: 0; }
  .sello-logos img { height: 230px; }
  .alianzas-grid { grid-template-columns: repeat(2, 1fr); }
  .ifama-intro { grid-template-columns: 1fr; }
  .ifama-grid { grid-template-columns: 1fr; }
  .volver { top: auto; bottom: 18px; left: 16px; }
}
@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--gris3);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 24px 24px;
    gap: 16px;
  }
  .nav.abierto { display: flex; }
  .dropdown-menu {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 6px 0 0 16px;
  }
  .hero h1 { font-size: 2rem; }
  h1 { font-size: 2.1rem; }
}
@media (max-width: 560px) {
  /* Venian de un bloque de 560 px suelto que estaba escrito antes del de 980:
     alli cualquier regla nueva de 980 les habria ganado por orden. */
  .post-contenido .esquema-fila { grid-template-columns: 1fr; gap: 4px; }
  .post-contenido .frase-clave { font-size: 1.12rem; }
  /* En movil el panel de Contacto se aprieta: si no, el boton del correo se sale */
  .contacto-panel { padding: 26px 20px; }
  .rueda { grid-template-columns: 1fr; }
  .ficha-razones { grid-template-columns: 1fr; }
  .ficha-titulo { font-size: 1.5rem; }
  .ficha-fotos img { width: 72px; height: 72px; }
  .contacto-panel .hero-botones .btn-flecha { padding-left: 18px; gap: 10px; font-size: .88rem; }
  .equipo-grid { grid-template-columns: 1fr; }
  .hero-botones .btn-flecha { width: 100%; justify-content: space-between; }
  .cifras-grid { grid-template-columns: 1fr; }
  .cifra-caja { min-height: 0; padding: 26px 24px 24px; }
  .cifra-caja.paso-1 { border-radius: var(--radius) var(--radius) 0 0; }
  .cifra-caja.paso-2, .cifra-caja.paso-3 { border-radius: 0; }
  .cifra-caja.paso-4 { border-radius: 0 0 var(--radius) var(--radius); }
  .cifra-caja .icono-cifra { width: 54px; height: 54px; top: 22px; right: 22px; }
  .cifra-caja .icono-cifra svg { width: 32px; height: 32px; }
  .cifra-caja .num { font-size: 3.6rem; }
  .pie-grid { grid-template-columns: 1fr; }
  .pie-cta { grid-template-columns: 1fr; }
  .columna-logos .celda { height: 72px; }
  .columna-logos img { height: 44px; max-width: 118px; }
  .cultivos-grid { grid-template-columns: repeat(2, 1fr); }
  .recursos-destacados { grid-template-columns: 1fr; }
  .destacado:first-child { grid-column: auto; }
  .testimonio {
    padding: 24px 22px 20px;
    grid-template-columns: 1fr;
    grid-template-areas: "frase" "autor" "boton" "completo";
    gap: 14px;
  }
  .testimonio .autor { justify-content: flex-start; }
  .testimonio .autor img { max-width: 110px; }
  .alianzas-grid { grid-template-columns: 1fr; }
  .ifama-fotos { grid-template-columns: 1fr; }
  .sello-logos img { height: 190px; }
}