/* TuCampo - landing v1
   Origen: export de Claude Design (runtime x-dc), convertido a HTML/CSS estatico.
   El layout vive inline en index.html, igual que en el diseno v1.
   Aca queda solo lo que no puede ir inline: @font-face, :hover y utilidades. */

/* ---------- Plus Jakarta Sans (self-hosted) ---------- */
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/fonts/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/fonts/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/fonts/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- base ---------- */
/* Sistema de radios. Tres pasos y el pill; no inventar valores nuevos.
     8px  etiquetas y chips
    14px  bloques internos (iconos, listas, filas del FAQ)
    24px  tarjetas, paneles y secciones
   999px  botones y badges
   Excepcion: los marcos de dispositivo (como .pant) llevan sus propios
   radios. Son objetos fisicos: el radio es parte del dibujo, no del sistema
   de UI. */

/* Superficies del navegador tematizadas con la paleta, no en su default. */
::selection { background: #D4A853; color: #1A1A1A; }
::-moz-selection { background: #D4A853; color: #1A1A1A; }
html { accent-color: #1B4332; caret-color: #1B4332; }
:focus-visible { outline: 2px solid #1B4332; outline-offset: 3px; }
#acceso :focus-visible { outline-color: #D4A853; }

/* overflow-x solo en html, no en body: puesto en los dos, el body pasa a
   ser su propio contenedor de scroll (no crece con el viewport) y eso
   corta position:sticky para todo lo que este adentro — asi paso con
   .proc__intro y con las cards apiladas de mas abajo. */
html, body { margin: 0; padding: 0; scrollbar-width: none; -ms-overflow-style: none; }
html { overflow-x: hidden; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { background: #F4F5F2; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #1A1A1A; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: #1B4332; text-decoration: none; }
a:hover { color: #D4A853; }
a[data-logo] { filter: grayscale(1); opacity: 0.6; transition: filter 180ms ease, opacity 180ms ease; }
a[data-logo]:hover { filter: none; opacity: 1; }

/* ---------- hover (viene de los style-hover del diseno) ---------- */
.hv-1:hover { color: #D4A853 !important; }
.hv-2:hover { background: #E0BA6C !important; }
.hv-3:hover { background: rgba(255,255,255,0.12) !important; color: #FFFFFF !important; }
.hv-4:hover { opacity: 0.65 !important; }
.hv-5:hover { color: #6E736C !important; }
.hv-6:hover { background: #265C44 !important; color: #FFFFFF !important; }
.hv-7:hover { background: #F0F2ED !important; color: #1B4332 !important; }
.hv-8:hover { background: #1B4332 !important; color: #FFFFFF !important; border-color: #1B4332 !important; }
.hv-10:hover { background: #265C44 !important; }
.hv-11:hover { background: #FFFFFF !important; color: #1B4332 !important; }
.hv-12:hover { border-color: #D4A853 !important; }

/* ---------- placeholders de imagen pendientes ---------- */
.img-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #E6E9E2 0 10px, #EDF0EA 10px 20px);
  border: 1px dashed #C3CABF;
  color: #7C857A;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.img-slot > span { max-width: 90%; line-height: 1.35; }
.img-slot--circle {
  position: relative;
  inset: auto;
  border-radius: 50%;
  flex: 0 0 auto;
  font-size: 10px;
}
/* Para poner la captura real: <div class="img-slot"><img src="..." alt=""></div> */
.img-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-slot:has(> img) { border: 0; background: none; }
.img-slot:has(> img) > span { display: none; }

/* ---------- FAQ ---------- */
[data-faq] { user-select: none; }
.faq-body[hidden] { display: none; }

/* ---------- Seccion Funciones: grilla estatica de modulos ----------
   Los seis modulos de una, sin carrusel ni loader — antes rotaban en dos
   tandas de tres; ahora es una grilla fija de 3 columnas x 2 filas.
   Cada card elige su tratamiento visual: captura, telefono, Mac o sin captura. */

/* La pagina no trae reset global (el diseno original tampoco), asi que el
   border-box va acotado a estos componentes y no toca el resto del layout. */
.fn-grid, .fn-grid *, .fn-grid *::before, .fn-grid *::after {
  box-sizing: border-box;
}

.fn-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.fn-card {
  background: #FFFFFF;
  border: 1px solid #E6E8E3;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fn-card__body { padding: 26px 26px 22px; }
.fn-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #EAF0EA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fn-card__title {
  margin: 18px 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1A1A1A;
}
.fn-card__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: #5A625B; }

/* Card con captura: la imagen va al pie, a lo ancho. */
.fn-media {
  position: relative;
  height: 196px;
  margin-top: auto;
  background: #ECEEE9;
}

/* Cards con mockup: el dispositivo asoma desde abajo, recortado por la card. */
.fn-media--device {
  height: 214px;
  background: linear-gradient(168deg, #EDF1EC 0%, #DCE4DA 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.fn-phone {
  width: 158px;
  padding: 6px 6px 0;
  background: linear-gradient(160deg, #F2F3F4 0%, #E1E3E6 55%, #CBCED2 100%);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 14px 26px rgba(8, 24, 16, 0.18);
}
.fn-phone__screen {
  position: relative;
  height: 178px;
  border-radius: 19px 19px 0 0;
  overflow: hidden;
  background: #EDE7DE;
}
.fn-phone__notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 13px;
  border-radius: 9px;
  background: #0B0C0D;
  z-index: 2;
}

/* iMac: el equipo entra entero (tiene pie, recortarlo se ve mal), asi que
   esta card centra en vez de dejar que el dispositivo asome desde abajo. */
.fn-media--mac {
  height: 214px;
  background: linear-gradient(168deg, #EDF1EC 0%, #DCE4DA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  overflow: hidden;
}
.fn-mac {
  position: relative;
  height: 100%;
  aspect-ratio: 600 / 500;   /* el viewBox del SVG */
}

/* ---------- Stock y vehiculos, lado a lado ("Maquinas e insumos") ----------
   Una sola imagen con los dos recortes ya compuestos: de cada pantalla de la
   app quedan el titulo, la bajada y una ficha centrada, sin barra lateral ni
   barra de perfil. Alrededor de los paneles el PNG es transparente, asi que
   apoyan sobre el degrade de la card en vez de traer su propio fondo.

   La altura sale de la relacion de la imagen (1916x821 = 2,334) para que entre
   entera: si cambia el ancho de la card, `contain` la sigue mostrando completa
   en vez de recortarla. */
.fn-media--duo {
  height: 170px;
  background: linear-gradient(168deg, #EDF1EC 0%, #DCE4DA 100%);
  overflow: hidden;
}
.fn-media--duo .img-slot > img { object-fit: contain; }


/* ---------- Pantallas de la app, redibujadas en HTML ----------
   No son capturas: es la interfaz vuelta a dibujar. Asi no se cuela ningun
   dato de nadie, se ve nitida en cualquier pantalla (una captura de telefono
   reducida a un tercio se ensucia) y se corrige cuando cambie el producto.

   Todo se dimensiona con container queries: .pant es el contenedor y la
   medida base es 1em = 20px de la pantalla real (652px de ancho), o sea
   20/652 = 3.07cqw. De ahi en mas todo va en em, que es px del diseno / 20.
   Por eso el font-size se declara UNA sola vez: si se repite en el medio, los
   em de los hijos se calculan sobre el valor equivocado. */
.pant {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  container-type: size;
  background: #F4F4F2;
  color: #1A1A1A;
  text-align: left;
}
.pant, .pant * { box-sizing: border-box; }
/* Ojo: aca NO va un `.pant p { margin: 0 }`. Tiene mas especificidad que las
   clases de abajo y les pisa el margin-top a todos los parrafos, que quedan
   pegados unos a otros. Cada clase declara su margen entero.

   Y los margenes van contra el font-size DEL PROPIO elemento, no contra la
   base: para un titulo de 46px, 54px de aire son 54/46 = 1.17em, no 2.7em. */
.pant__estado, .pant__cuerpo { font-size: 3.07cqw; }

/* Barra de estado: existe para que el notch del marco apoye sobre el verde de
   la app, como en el telefono de verdad. La hora y la senal son de adorno. */
.pant__estado {
  height: 4.3em;
  background: #1B4332;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4em;
  color: #FFFFFF;
}
.pant__hora { font-size: 1.1em; font-weight: 700; }
.pant__senal { display: flex; align-items: flex-end; gap: 0.2em; }
.pant__senal i { width: 0.22em; background: #FFFFFF; border-radius: 0.1em; }
.pant__senal i:nth-child(1) { height: 0.45em; }
.pant__senal i:nth-child(2) { height: 0.7em; }
.pant__senal i:nth-child(3) { height: 0.95em; }
.pant__senal b { width: 1.3em; height: 0.7em; margin-left: 0.35em; border-radius: 0.2em; background: #FFFFFF; }

/* Los margenes de aca abajo salen un poco mas cortos que los de la captura, y
   es a proposito: en la captura se mide de tinta a tinta, pero un margen de
   CSS arranca en el borde de la caja de linea, que empieza mas arriba que la
   letra. Copiar el numero tal cual suma medio interlineado en cada salto y las
   tres cards ya no entran en la pantalla. */
.pant__cuerpo { padding: 0.6em 1.25em 0; }

/* Barra de navegacion verde, en pastilla. */
.pant__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.15em;
  padding: 0 0.5em;
  border-radius: 999px;
  background: #1B4332;
}
.pant__menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28em;
  width: 3.1em;
  height: 3.1em;
  padding: 0 0.85em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}
.pant__menu i { height: 0.22em; border-radius: 999px; background: #FFFFFF; }
.pant__der { display: flex; align-items: center; gap: 0.35em; }
.pant__ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9em;                              /* 58px del original */
  height: 2.9em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.pant__ico svg { width: 1.65em; height: 1.65em; }
/* El globito de avisos, con su numero adentro. */
.pant__ico b {
  position: absolute;
  top: -0.2em;
  right: -0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: #D4A853;
  color: #FFFFFF;
  font-size: 0.85em;
  font-weight: 700;
}
.pant__cuenta {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.5em 0.3em 0.3em;
  border-radius: 999px;
  background: #FFFFFF;
}
.pant__avatar { width: 2.2em; height: 2.2em; border-radius: 50%; object-fit: cover; background: #2F6B4C; }
.pant__chev {
  width: 0.7em;
  height: 0.7em;
  border-right: 0.16em solid #1B4332;
  border-bottom: 0.16em solid #1B4332;
  transform: translateY(-0.15em) rotate(45deg);
}

.pant__titulo { margin: 0.95em 0 0; font-size: 2.3em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.pant__bajada { margin: 0.54em 0 0; font-size: 1.2em; line-height: 1.35; color: #7C857A; }
.pant__link {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0.92em 0 0;
  font-size: 1.2em;
  font-weight: 700;
  color: #C0912E;
}
/* La etiqueta del link: un rombo con su agujero, que a este tamano alcanza. */
.pant__link::before {
  content: "";
  flex: 0 0 auto;
  width: 0.62em;
  height: 0.62em;
  border: 0.14em solid currentColor;
  border-radius: 0.15em;
  transform: rotate(45deg);
}

.pant__acciones { display: flex; gap: 0.75em; margin-top: 1.2em; }
.pant__btn {
  flex: 1 1 0;
  height: 2.58em;                            /* 67px del original / 26px de letra */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1em solid #DCE0D9;
  border-radius: 0.6em;
  background: #FFFFFF;
  font-size: 1.3em;
  font-weight: 600;
}
.pant__btn--fuerte { border-color: #1B4332; background: #1B4332; color: #FFFFFF; }

.pant__card {
  margin-top: 0.9em;
  padding: 1.35em;
  border: 0.05em solid #ECEEE9;
  border-radius: 1em;
  background: #FFFFFF;
}
/* La primera card respira un poco mas que las de abajo, como en la app. */
.pant__acciones + .pant__card { margin-top: 1.35em; }
.pant__ctit { display: flex; align-items: center; margin: 0; font-size: 1.5em; font-weight: 700; line-height: 1.15; }
.pant__swap { width: 1.05em; height: 1.05em; margin-left: auto; flex: 0 0 auto; }
.pant__chip {
  display: inline-block;
  margin-top: 0.7em;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: #E8EFE7;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.15;
  color: #2C4A38;
}
.pant__num { margin: 0.64em 0 0; font-size: 2.2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.pant__num em { font-style: normal; font-size: 0.58em; font-weight: 600; color: #8A9088; margin-left: 0.35em; }
.pant__pie {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.5em 0 0;
  font-size: 1em;
  color: #A0A79E;
}
/* El pin del lote: una gota, que es un circulo con una esquina en punta. */
.pant__pie::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  flex: 0 0 auto;
  border: 0.13em solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* ---------- Lo que suma la pantalla de alertas de sanidad ---------- */

/* El titulo de sanidad lleva el corazon con el pulso al lado. */
.pant__titulo--icono { display: flex; align-items: center; gap: 0.3em; }
.pant__titulo--icono svg { width: 0.95em; height: 0.95em; flex: 0 0 auto; }

/* La aclaracion gris sobre las alertas que sugiere la IA. */
.pant__nota { margin: 1.4em 0 0; font-size: 1em; line-height: 1.4; color: #B4BAB2; }
.pant__nota em { font-style: normal; color: #C0912E; }

/* Titulo de alerta: es una frase larga, no una etiqueta, asi que se acuesta
   en varias lineas y no lleva el icono de mover al lado. */
.pant__ctit--alerta { display: block; font-size: 1.35em; font-weight: 600; }

.pant__chips { display: flex; gap: 0.4em; margin: 0.75em 0 0; }
.pant__chip--rojo  { background: #FCE7E7; color: #B23B3B; }
.pant__chip--ambar { background: #FBF0DA; color: #8A6A1E; }
.pant__chip--ia    { background: #FBECD9; color: #B5822A; }

/* La fila de la fecha: el guion a la izquierda y la fecha con su estado
   alineados a la derecha, como en la app. */
.pant__fecha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 1.1em 0 0;
  font-size: 1.1em;
  color: #8A9088;
}
.pant__fecha b { font-weight: 400; text-align: right; }
.pant__fecha em { display: block; font-style: normal; font-size: 0.92em; color: #7C857A; }
.pant__fecha .es-rojo { color: #C0392B; font-weight: 600; }

/* Aceptar y descartar la alerta. Van en SVG y no como circulo dibujado con
   border, porque el tilde y la barra adentro no salen con CSS solo. */
.pant__acc { display: flex; align-items: center; gap: 0.5em; margin: 1em 0 0; }
.pant__ok { width: 1.55em; height: 1.55em; flex: 0 0 auto; }
/* El primero empuja contra la derecha; el segundo se le pega al lado. No sirve
   :first-child, porque en la alerta de la IA el primer hijo es el chip. */
.pant__ok { margin-left: auto; }
.pant__ok + .pant__ok { margin-left: 0; }
/* El chip base trae su propio margen de arriba, que en estas filas sobra. */
.pant__chips .pant__chip, .pant__acc .pant__chip { margin-top: 0; }

/* ---------- Lo que suma la pantalla de registros ---------- */

/* Buscador: no es un input de verdad, es el dibujo de uno. */
.pant__buscar {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 1.54em 0 0;
  height: 2.6em;
  padding: 0 0.85em;
  border: 0.06em solid #E2E5DF;
  border-radius: 0.6em;
  background: #FFFFFF;
  font-size: 1.2em;
  color: #A0A79E;
}
.pant__buscar svg { width: 1em; height: 1em; flex: 0 0 auto; }
.pant__buscar + .pant__card { margin-top: 1.5em; }

/* El texto del registro, con el tacho arriba a la derecha. */
.pant__reg {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin: 0;
  font-size: 1.4em;
  line-height: 1.35;
}
.pant__tacho { width: 1.05em; height: 1.05em; flex: 0 0 auto; margin-left: auto; }
.pant__meta { margin: 0.6em 0 0; font-size: 1.1em; color: #A0A79E; }

/* ---------- Lo que suma la pantalla de flujo de caja ---------- */

/* El boton de Filtros va solo y a lo ancho, con su icono al lado. */
.pant__btn svg { width: 1em; height: 1em; flex: 0 0 auto; margin-right: 0.4em; }

.pant__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85em;
  margin-top: 1.4em;
}
.pant__mini {
  min-height: 8.4em;
  padding: 1.4em;
  border: 0.05em solid #ECEEE9;
  border-radius: 1em;
  background: #FFFFFF;
}
.pant__rot {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  font-size: 1.2em;
  color: #7C857A;
}
.pant__rot svg { width: 0.95em; height: 0.95em; flex: 0 0 auto; }
.pant__cifra { margin: 0.35em 0 0; font-size: 2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.pant__aclara { margin: 0.4em 0 0; font-size: 1.1em; line-height: 1.3; color: #A0A79E; }

/* El grafico de ingresos y egresos. Las lineas se posicionan por `top` desde
   el HTML (0 / 50% / 100%), asi el eje se lee en el markup y no hay que
   contar clases para saber donde cae cada una. */
/* El grafico se corta contra el borde de abajo de la pantalla. El alto del
   area esta elegido para que la linea del cero entre entera: si se corta a la
   mitad se lee como error y no como que la pantalla sigue. */
.pant__grafico { margin-top: 1em; }
.pant__gtit { margin: 0; font-size: 1.35em; font-weight: 700; }
.pant__plot { position: relative; height: 6em; margin: 1.1em 0 0 3em; }
.pant__linea {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 0.06em solid #EDEFEA;
}
.pant__linea i {
  position: absolute;
  right: 100%;
  top: -0.6em;
  margin-right: 0.6em;
  font-style: normal;
  font-size: 1.1em;
  color: #A0A79E;
}
.pant__barra {
  position: absolute;
  bottom: 0;
  width: 11%;
  border-radius: 0.15em 0.15em 0 0;
  background: #1B7A4B;
}
.pant__barra--sale { background: #C0912E; }

/* Sin container queries la pantalla igual se dibuja: queda a un tamano fijo
   razonable en vez de desaparecer. */
@supports not (container-type: size) {
  .pant__estado, .pant__cuerpo { font-size: 6px; }
}

/* ---------- Banda de apertura de Funciones (estilo WinCampo) ----------
   Foto entera atras, tarjeta de marca adelante, las dos corridas hacia el
   centro para que se superpongan — no una al lado de la otra con un hueco en
   el medio. El orden de las capas es lo que hace el gesto: la tarjeta tiene
   su propio z-index (crea contexto de apilado, por eso la insignia entra en
   ese mismo contexto y no compite con el de la foto) y una sombra mas fuerte
   que el resto de las tarjetas del sitio — es lo que la separa visualmente
   de la foto y no solo el orden en el HTML.

   La insignia va en lima sobre verde, la misma combinacion que la tarjeta
   destacada del navbar (.nv__destacado--lima), asi que no es un color nuevo
   en el sistema. */
/* Sale del inline para poder achicarlo en telefono sin un !important. */
.fn-seccion { padding: 110px 40px 90px; }

.fn-banner {
  display: grid;
  grid-template-columns: 0.98fr 1.02fr;
  gap: 0;
  /* Centrado, no estirado: la tarjeta se achica al tamaño de su contenido y
     queda mas baja que la foto, con aire arriba y abajo. Con "stretch" las
     dos quedaban parejas y la insignia terminaba flotando en el vacio de
     arriba en vez de escaparse del borde de una tarjeta mas chica. */
  align-items: center;
}
.fn-banner__foto {
  position: relative;
  z-index: 1;
  /* Se corre hacia el centro (a la derecha) para meterse debajo de la
     tarjeta. La medida es la mitad del solape total: entre las dos capas
     queda una franja de ~144px donde se pisan. */
  margin-right: -72px;
  inset: auto;
  height: 480px;
  border-radius: 28px;
  font-size: 13px;
}
.fn-banner__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fn-banner__card {
  position: relative;
  z-index: 2;
  /* Se corre hacia el centro, por encima de la foto, pero menos que la foto
     hacia el otro lado: queda mas a la derecha y el solape es mas angosto
     que si tirara parejo. */
  margin-left: -40px;
  padding: 52px 46px;
  border-radius: 28px;
  background: #1B4332;
  /* Mas sombra que cualquier otra tarjeta del sitio, a proposito: sin esto,
     "arriba en el HTML" no alcanza para leerse como "por encima" en la foto —
     la sombra es la que vende la profundidad. */
  box-shadow: 0 30px 64px rgba(8, 24, 16, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Corrida hacia arriba y a la derecha, mitad afuera de la tarjeta — como en
   la referencia. Queda dentro del contexto de apilado que crea la tarjeta
   (position + z-index), asi que su propio z-index solo compite ahi adentro. */
.fn-banner__insignia {
  position: absolute;
  top: -22px;
  right: -22px;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E3FDCB;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(8, 24, 16, 0.28);
}
.fn-banner__insignia svg { width: 26px; height: 26px; }
.fn-banner__titulo {
  margin: 0;
  font-size: min(3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #FFFFFF;
}
.fn-banner__sub {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: #E3FDCB;
}
.fn-banner__texto {
  /* Sin max-width en ch a proposito: en Plus Jakarta Sans un ch resuelve a
     11,7px (el ancho del glifo "0"), bastante mas que un caracter promedio —
     ver README. El ancho de la columna de la tarjeta ya acota el texto. */
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Titulo + boton + una foto grande (estilo Breedr) ---------- */
/* Salio del inline para poder achicarlo en telefono; el valor de escritorio
   tiene que quedar aca como base, si no la seccion se queda sin padding. */
.cta-seccion { padding: 110px 40px 0; }

/* Una sola composicion para las tres vistas, cambiando nada mas los tamaños:
   la foto y la tarjeta verde van a la MISMA celda del grid, la tarjeta
   anclada abajo a la izquierda, montada sobre la foto y asomando un poco por
   debajo. Antes escritorio tenia otra cosa (foto a un lado, texto al otro) y
   convivian dos diseños distintos para el mismo bloque. */
.cta-doble {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: 0 auto;
}
.cta-doble__foto {
  grid-area: 1 / 1;
  display: block;
  position: relative;
  justify-self: start;
  width: 440px;
  max-width: none;
  aspect-ratio: 848 / 1264;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(8, 24, 16, 0.18);
}
.cta-doble__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cta-doble > div:last-child {
  grid-area: 1 / 1;
  /* En escritorio, foto a la izquierda y tarjeta a la derecha, centrada
     contra el alto de la foto y montada sobre su borde. En pantallas chicas
     no hay ancho para eso y se ancla al pie (ver los media query de abajo). */
  align-self: center;
  justify-self: end;
  z-index: 1;
  /* border-box para que el ancho declarado sea el final: en content-box el
     padding se suma aparte y la tarjeta se pasa de largo. */
  box-sizing: border-box;
  /* Pegada al borde derecho del contenedor (1000px). Con la foto en 440,
     un ancho de 610 deja 50px de solape sobre su borde derecho: lo justo
     para que se lea como una tarjeta apoyada encima y no como dos bloques
     uno al lado del otro. */
  width: 610px;
  padding: 40px 38px 42px;
  border-radius: 26px;
  background: #1B4332;
  box-shadow: 0 30px 64px rgba(8, 24, 16, 0.34);
  text-align: left;
}
/* Sobre la tarjeta verde el texto se da vuelta: titulo en blanco y la parte
   resaltada en el lima de interfaz. */
.cta-doble__titulo {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #FFFFFF;
}
.cta-doble__titulo strong { font-weight: 800; color: #E3FDCB; }
/* El boton va vacio, apenas dibujado con su contorno; el relleno lima de
   .tc-btn-flecha entra recien con el mouse y ahi el texto pasa a verde. */
.cta-doble__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  height: 50px;
  padding: 0 24px;
  border-radius: 9999px;
  background: transparent;
  border: 1.5px solid rgba(227, 253, 203, 0.5);
  color: #E3FDCB;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
}
.cta-doble__btn.tc-btn-flecha:hover,
.cta-doble__btn.tc-btn-flecha:focus-visible {
  border-color: #E3FDCB;
  color: #1B4332;
}

/* ---------- El CTA en tablet ----------
   Misma composicion que arriba, solo mas chica: la foto ocupa el ancho de la
   seccion y la tarjeta se le monta abajo a la izquierda. */
@media (max-width: 900px) {
  /* El padding de abajo le hace lugar a lo que asoma la tarjeta; sin eso, la
     seccion siguiente le queda encima. */
  .cta-seccion { padding: 70px 20px 112px; }
  .cta-doble { max-width: none; }
  /* Angosta y centrada en la seccion; la tarjeta asoma por su izquierda.
     La proporcion importa tanto como el ancho: la imagen es vertical (0.67)
     y con una caja apaisada el cover le come el alto. Con 4/3.4 (1.18) se
     veia apenas el 57% de la imagen y el titulo del aviso quedaba cortado
     arriba. Con 4/5 (0.8) se ve el 84%. */
  .cta-doble__foto { width: 62%; justify-self: center; aspect-ratio: 4 / 5; }
  .cta-doble > div:last-child {
    /* Al pie y a la izquierda: aca no hay ancho para ponerla al costado como
       en escritorio, asi que se monta sobre la esquina de abajo y sale un
       poco por fuera del borde izquierdo de la foto. */
    align-self: end;
    justify-self: start;
    /* Mas angosta que en escritorio: con 66% la tarjeta le pasaba por
       encima al mockup de la tablet, que es lo que hay que dejar ver. */
    width: 52%;
    /* Corrida respecto del borde del contenedor: con la foto centrada, una
       tarjeta pegada a la izquierda del todo quedaria colgando sola, muy
       lejos de la imagen. Asi asoma poco mas de 100px. */
    margin-left: 30px;
    margin-bottom: -112px;
    padding: 32px 30px 34px;
  }
  .cta-doble__titulo { font-size: 27px; }
}

/* En el telefono entra bastante menos que en la tablet, asi que no comparten
   medidas: la foto baja de 200 a 150 y el texto y el boton se achican para
   que la foto siga viendose. */
/* ---------- El CTA en telefono ----------
   La misma composicion, con la foto mas alta (aca hay poco ancho) y la
   tarjeta ocupando casi todo. */
@media (max-width: 600px) {
  /* El padding de abajo son los 92px que asoma la tarjeta MAS el aire que
     tiene que quedar hasta la seccion siguiente: con 92 justos, el pie de la
     tarjeta caia exacto en el borde y lo de abajo arrancaba pegado. */
  .cta-seccion { padding: 70px 20px 132px; }
  .cta-doble__foto { width: 100%; aspect-ratio: 4 / 5.2; }
  .cta-doble > div:last-child {
    width: 84%;
    /* Corrida un poco hacia afuera por la izquierda: si arranca justo en el
       borde de la foto las dos aristas quedan alineadas y se lee como un
       bloque solo, no como una tarjeta apoyada encima. */
    margin-left: -10px;
    margin-bottom: -92px;
    padding: 24px 22px 26px;
    border-radius: 22px;
  }
  .cta-doble__titulo { font-size: 21px; }
  .cta-doble__btn {
    margin-top: 18px;
    height: auto;
    min-height: 44px;
    padding: 11px 16px;
    gap: 9px;
    font-size: 13.5px;
  }
}

/* ---------- El banner de Funciones en pantallas angostas ----------
   El corte va en 900 y no en 760: la tablet vertical mide 768, y con el
   limite anterior se quedaba con las dos columnas de escritorio apretadas.

   El solape de escritorio es horizontal (una capa corrida hacia la otra);
   apiladas en una columna no hay "hacia el centro" que valga y los margenes
   negativos solo desbordarian por los costados. Se sacan, y la tarjeta pasa
   a montarse sobre el borde de abajo de la foto, ademas metida un poco para
   adentro a los dos lados, como en la referencia. */
@media (max-width: 900px) {
  .fn-seccion { padding: 70px 20px 60px; }
  .fn-banner { grid-template-columns: 1fr; align-items: start; }
  .fn-banner__foto {
    /* Alto proporcional al ancho en vez de fijo: con un valor clavado, la
       misma foto queda alta en el telefono y como una franja en la tablet. */
    height: clamp(300px, 85vw, 420px);
    margin-right: 0;
    border-radius: 22px;
  }
  .fn-banner__card {
    margin: -64px 16px 0;
    padding: 34px 26px 32px;
    border-radius: 22px;
  }
  /* La insignia se achica con la tarjeta y se corre menos hacia afuera, para
     no pasarse del padding de la seccion. */
  .fn-banner__insignia { top: -20px; right: -14px; width: 54px; height: 54px; }
  .fn-banner__insignia svg { width: 22px; height: 22px; }
  /* El titulo usa min(3vw, 40px), que sin piso da 11px en un telefono de
     375. Aca se le pone el piso que le falta. */
  .fn-banner__titulo { font-size: clamp(27px, 6.6vw, 40px); }
  .fn-banner__sub { margin-top: 14px; font-size: 16.5px; }
  .fn-banner__texto { font-size: 15px; }
}

/* ---------- Cards de articulos, a foto completa ----------
   La foto ocupa la card entera y el texto va encima, apoyado en el pie
   sobre un degradado que sube desde abajo (no un velo parejo: arriba la
   foto tiene que verse limpia, y el degradado es lo que hace legible el
   texto sin ensuciar la imagen).

   El hover: el bloque de texto sube y en el hueco que deja aparece el
   boton. Los dos se mueven la misma distancia, que es exactamente el alto
   del boton mas su separacion — asi el texto termina justo donde arranca
   el boton y no queda ni pisado ni con un hueco raro. Esa distancia vive
   en --nota-salto para no repetirla en tres lugares. */
/* Salen del inline para poder centrarlos en telefono y tablet; los valores
   son los mismos que tenian, asi escritorio no se mueve. */
.art-seccion { padding: 110px 40px 110px; }
.art-titulo {
  margin: 0;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
}
.art-raya { width: 56px; height: 3px; background: #D4A853; margin-top: 18px; }
.art-bajada { margin: 18px 0 0; font-size: 17px; color: #5A625B; }

.nota-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 42px;
}
.nota {
  --nota-salto: 62px;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  color: #FFFFFF;
  text-decoration: none;
  /* Fondo del color de la pagina: con un fondo oscuro, el recorte
     redondeado de la card lo deja asomar como un hilo negro alrededor de
     la foto (la foto tiene esquinas rectas y el recorte es curvo, y en el
     antialiasing de esa curva gana el fondo).
     La card en si no se mueve ni se sombrea con el hover: lo unico que
     pasa es que el texto se levanta y aparece el boton. */
  background: #F4F5F2;
}
/* El filtro de categorias de /blog esconde tarjetas con el atributo hidden, y
   el display:block de arriba le gana al [hidden] de la hoja del navegador: las
   reglas del autor siempre le ganan a las del user agent, sin importar la
   especificidad. Sin esta linea, poner hidden no oculta nada. Es el mismo
   motivo por el que .faq-body, .menu-mobile y .modal tienen su propia regla. */
/* El logo arriba al centro de la tarjeta. Va solo en .nota y no en la portada
   del articulo ni en el destacado, porque esos dos muestran la composicion 16:9
   entera, que ya trae el logo adentro del panel verde; la tarjeta es la unica
   que lo recorta y se queda sin marca.

   Es un pseudo-elemento y no un <img> porque las tarjetas se arman en dos
   lugares (el generador del blog y la home), asi hay una sola definicion.
   brightness(0) invert(1) lo fuerza a blanco sin guardar una segunda copia del
   archivo: apaga el color y despues lo da vuelta. La sombra es para que no se
   pierda cuando la foto arranca clara arriba, igual que el text-shadow de
   .sist-card__titulo. */
.nota::before {
  content: "TuCampo";
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding-left: 34px;
  background: url("./assets/img/logo-tucampo.webp") left center / 26px 26px no-repeat;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 26px;
  color: #FFFFFF;
  /* brightness(0) apaga el color del logo y del texto, invert(1) los deja
     blancos a los dos: asi el logo verde y la palabra salen del mismo color
     sin guardar una segunda copia del archivo. La sombra va ultima a
     proposito, para que se dibuje sobre el resultado ya invertido y no se de
     vuelta ella tambien. */
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(10, 28, 18, 0.5));
}
.nota[hidden] { display: none; }
.nota:hover { color: #FFFFFF; }
.nota__foto { position: absolute; inset: 0; border: 0; }

/* El degradado. Va como capa aparte y no como background de .nota__cuerpo
   para que arranque bien arriba del texto y suba suave.

   Arranca transparente y solo oscurece de la mitad para abajo: si tambien
   oscurece el tope, el recuadro claro de la fecha queda rodeado de foto
   oscurecida y su recorte se lee como una linea dibujada alrededor. El
   tope tiene que quedar limpio para que el recorte parezca eso, un
   recorte. */
.nota::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 18, 0) 0%, rgba(12, 26, 18, 0) 40%, rgba(12, 26, 18, 0.58) 70%, rgba(10, 22, 15, 0.9) 100%);
  pointer-events: none;
}

/* No es una etiqueta apoyada sobre la foto: es un pedazo que la foto no
   ocupa. Lo que lo vende es el color — exactamente el del fondo de la
   pagina, no un blanco parecido ni semitransparente — y ahi si el radio
   de la esquina de adentro suma: hace que la foto parezca recortada con
   la misma curva que el resto de la card. La esquina de afuera se
   redondea sola con el overflow de la card. */
.nota__fecha {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 10px 16px 12px 18px;
  border-bottom-left-radius: 18px;
  background: #F4F5F2;
  color: #1B4332;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Todo el bloque (texto + boton) esta corrido hacia abajo lo que mide el
   boton con su separacion: el boton queda pasado del borde y el overflow
   de la card lo esconde, y el texto termina apoyado justo en el pie. El
   hover suelta ese corrimiento: el bloque entero sube --nota-salto, o sea
   el texto se levanta exactamente lo que hace falta para que el boton
   entre abajo. Un solo transform hace las dos cosas — si ademas se
   compensa el texto en sentido contrario, las dos traslaciones se anulan
   y el texto no se mueve nunca. */
.nota__cuerpo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 24px 24px;
  transform: translateY(var(--nota-salto));
  transition: transform 420ms cubic-bezier(.25, .46, .45, .94);
}
.nota:hover .nota__cuerpo,
.nota:focus-visible .nota__cuerpo { transform: translateY(0); }

.nota__rotulo {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.nota__titulo {
  margin: 10px 0 0;
  font-size: 23px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #FFFFFF;
}
.nota__bajada {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.nota__minutos {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
}

.nota__boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  height: 44px;
  padding: 0 22px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-size: 14.5px;
  font-weight: 600;
  color: #FFFFFF;
  /* Aparece con el hover: sin el, no se ve ni se puede clickear. */
  opacity: 0;
  transition: opacity 300ms cubic-bezier(.25, .46, .45, .94), background-color 200ms ease;
}
.nota:hover .nota__boton,
.nota:focus-visible .nota__boton { opacity: 1; }

/* Sin hover no hay a donde subir: se muestra todo quieto, con el boton a la
   vista, que es como se ve en un telefono. */
@media (hover: none) {
  .nota__cuerpo { transform: none; }
  .nota__boton { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nota__cuerpo { transition: none; }
}
@media (max-width: 900px) {
  .nota-grilla { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }

  /* En tablet van dos por fila. El tope de 420px y la columna unica son para
     el telefono; con 728px de ancho, dos columnas dejan cards de unos 355px,
     casi lo mismo que los 385px de escritorio, asi que la proporcion vertical
     de siempre (3/4) sigue funcionando y no hace falta acostarlas. */
  @media (min-width: 601px) {
    .nota-grilla { grid-template-columns: repeat(2, 1fr); max-width: none; gap: 18px; }
    .nota__titulo { font-size: 21px; }
    .nota__bajada { font-size: 14px; }
  }
  /* El encabezado va centrado, como el de "Como usas TuCampo". El centrado
     va elemento por elemento y NO con un text-align en la seccion: ahi se
     heredaria tambien adentro de las cards de abajo, que van alineadas a la
     izquierda. La rayita dorada ademas no es texto (es un div vacio), asi
     que no le sirve text-align: se centra con margenes automaticos. */
  .art-seccion { padding: 70px 20px 70px; }
  .art-titulo { font-size: clamp(30px, 7.4vw, 42px); text-align: center; }
  .art-raya { margin-left: auto; margin-right: auto; }
  .art-bajada { font-size: 16px; text-align: center; }
}

/* ---------- Historia del fundador, al estilo eAgronom ----------
   El nombre, el cargo y la flecha ya vienen grabados en la foto (se pidieron
   asi en el prompt de generacion), asi que no hay texto de HTML encima.

   El "papelito" blanco de la esquina no es un triangulo de lados rectos: es
   una curva concava real. La foto queda rectangular y sin recortar; encima
   de dos de sus esquinas se apoyan dos cuadraditos de 36px, blancos cerca de
   su propia punta exterior y transparentes hacia adentro. Esa curva la hace
   un radial-gradient con el centro puesto justo en la punta — no hace falta
   aproximarla con puntos de poligono, que es lo que daba el triangulo recto
   de antes. */
/* Salen del inline para poder cambiarlos por breakpoint. */
.fundador-seccion { background: #E8F0EB; padding: 96px 40px; }
.fundador-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

.fundador-foto { position: relative; }
.fundador-foto__img {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
.fundador-foto__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fundador-foto::before,
.fundador-foto::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 36px;
  height: 36px;
  pointer-events: none;
}
.fundador-foto::before {
  top: 0; left: 0;
  border-top-left-radius: 8px;
  background: radial-gradient(circle at 0 0, #FFFFFF 0 30px, transparent 32px);
}
.fundador-foto::after {
  bottom: 0; right: 0;
  border-bottom-right-radius: 8px;
  background: radial-gradient(circle at 100% 100%, #FFFFFF 0 30px, transparent 32px);
}

.fundador-titulo {
  margin: 0;
  font-size: min(2.6vw, 34px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: #5A625B;
}
.fundador-titulo strong { font-weight: 800; color: #1B4332; }
.fundador-texto {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #5A625B;
}
.fundador-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 700;
  color: #1B4332;
  text-decoration: none;
}
.fundador-link svg { width: 17px; height: 17px; transition: transform 200ms ease; }
.fundador-link:hover svg { transform: translateX(3px); }

/* ---------- La historia del fundador en pantallas angostas ----------
   Se apila y la foto vuelve arriba. En el HTML el texto va primero (asi
   queda espejado en escritorio), asi que aca se reordena con order en vez
   de tocar el markup: el orden de lectura para un lector de pantalla sigue
   siendo el mismo y no hay que duplicar nada. */
@media (max-width: 900px) {
  .fundador-seccion { padding: 64px 20px; }
  .fundador-grid { grid-template-columns: 1fr; gap: 32px; }
  .fundador-foto { order: -1; }
  /* Mismo min() sin piso que el banner: 2.6vw de 375 da menos de 10px. */
  .fundador-titulo { font-size: clamp(23px, 5.6vw, 34px); line-height: 1.32; }
  .fundador-texto { margin-top: 18px; font-size: 15.5px; }
  .fundador-link { margin-top: 22px; }
}

/* Sin media query para mobile a proposito: el grid de esta seccion es inline
   (grid-template-columns en el propio elemento), como el resto de la pagina,
   que todavia es desktop-first en su totalidad — ver "Pendientes" en el
   README. Cuando se resuelva el responsive en general, esta seccion entra en
   esa pasada, no antes por separado. */

/* ---------- "¿Como usas TuCampo?": tres sistemas productivos ----------
   Foto a sangre, velo oscuro para que el texto se lea, y el contenido apoyado
   abajo. El velo es mas fuerte en el pie justamente porque ahi va el texto. */

/* El padding y los tamaños salen del inline y viven aca para poder cambiarlos
   por breakpoint: un valor inline solo se pisa con !important. */
.sist-seccion { padding: 44px 40px 0; }
.sist-seccion__titulo {
  margin: 0;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
}
.sist-seccion__bajada { margin: 14px 0 0; font-size: 17px; color: #5A625B; }

.sist-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 46px;
  text-align: left;
}
.sist-card, .sist-card * { box-sizing: border-box; }
/* La card entera es el link: se toca o se clickea en cualquier parte de la
   foto y lleva al mismo lado que el boton. Por eso el boton es un <span> y
   no otro <a> — un link adentro de otro no es HTML valido, y ademas dejaria
   dos links al mismo destino. */
.sist-card {
  position: relative;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: inherit;
}
.sist-card:hover { color: inherit; }
/* El boton reacciona al hover de la CARD, no al suyo propio: el cursor casi
   nunca esta encima del boton, esta sobre la foto. Sin esto, pasar el mouse
   por la imagen no encendia nada. Se repiten los estados de .tc-btn-flecha
   apuntando al hover del padre. */
.sist-card:hover .sist-card__btn.tc-btn-flecha::before,
.sist-card:focus-visible .sist-card__btn.tc-btn-flecha::before { transform: translateX(0); }
.sist-card:hover .sist-card__btn.tc-btn-flecha,
.sist-card:focus-visible .sist-card__btn.tc-btn-flecha { color: #1B4332; }
.sist-card:hover .sist-card__btn .tc-flechas svg,
.sist-card:focus-visible .sist-card__btn .tc-flechas svg { transform: translateX(17px); }
.sist-card:focus-visible { outline: 2px solid #1B4332; outline-offset: 3px; }
.sist-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sist-card__velo {
  position: absolute;
  inset: 0;
  /* Oscurece en las dos puntas: arriba va el titulo, abajo la descripcion. */
  background: linear-gradient(
    180deg,
    rgba(18, 40, 28, 0.62) 0%,
    rgba(18, 40, 28, 0.26) 28%,
    rgba(18, 40, 28, 0.18) 46%,
    rgba(18, 40, 28, 0.74) 78%,
    rgba(12, 30, 20, 0.92) 100%
  );
  pointer-events: none;
}
.sist-card__titulo {
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  z-index: 2;
}
.sist-card__titulo h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(10, 28, 18, 0.5);
}

/* El boton, pastilla blanca abajo a la derecha. Comparte la animacion de
   relleno con .tc-btn-flecha (definida mas abajo junto al navbar), asi que
   solo aporta su propia forma y posicion.

   Ojo con el "position": .tc-btn-flecha trae su propio "position: relative"
   (lo necesita para el relleno que se le desliza adentro) y esta definido mas
   abajo en el archivo. Con la misma especificidad, el que viene despues en la
   cascada gana — asi que sin el selector compuesto de abajo, ese "relative"
   pisaria este "absolute" y el boton perderia el anclaje a la esquina. */
.sist-card__btn {
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 20px;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #1B4332;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(8, 24, 16, 0.22);
}
.sist-card__btn-linea { width: 1px; height: 17px; background: currentColor; opacity: 0.25; }

/* ---------- Las cards de sistema en pantallas angostas ----------
   Una abajo de la otra y ocupando el ancho, como en la referencia. El alto
   pasa de fijo a proporcion: con 320px clavados, una card que en escritorio
   mide 380 de ancho pasa a medir 700 en tablet y la foto queda como una
   franja aplastada. Con aspect-ratio el recorte se mantiene parecido en
   cualquier ancho. */
@media (max-width: 900px) {
  .sist-seccion { padding: 44px 20px 0; }
  .sist-seccion__titulo { font-size: clamp(30px, 7.4vw, 42px); }
  .sist-grilla { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
  .sist-card { height: auto; aspect-ratio: 16 / 9; }
}
/* En el telefono la card se estira: con 16/9 queda una franja baja al lado
   del titulo y el boton, que ocupan las dos puntas. */
@media (max-width: 600px) {
  .sist-card { aspect-ratio: 4 / 3.7; }
  .sist-card__titulo { top: 22px; left: 22px; right: 22px; }
  .sist-card__titulo h3 { font-size: 24px; }
  .sist-card__btn { right: 18px; bottom: 18px; }
}

/* ---------- "Como se empieza": el proceso en tres pasos ----------
   Los numeros van porque esto SI es una secuencia: el paso 2 no existe sin el
   1. No son decoracion.
   La referencia era neobrutalista (sombras duras, un color por paso). Aca se
   toma la estructura y no el vestido: la pagina tiene un solo acento, asi que
   los tres chips son iguales y lo que distingue es el numero. */

.proc, .proc * { box-sizing: border-box; }

/* El alto de .proc-scrub es puro recorrido: cuanto mas alto, mas scroll hay
   que hacer para que entren las tres cards. Mientras tanto .proc-sticky se
   queda clavada, asi que la pagina "frena" en la seccion hasta terminar.
   overflow: hidden es lo que esconde a las cards que todavia estan afuera,
   a la derecha. */
.proc-scrub { position: relative; min-height: 260vh; }
.proc-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* El navbar es fixed y flota por encima: sin este padding el centrado
     reparte el alto sobre TODA la pantalla y la primera card termina abajo
     de la barra. Con el padding, el centro es el de la franja que queda
     libre. box-sizing para que los 96px salgan de adentro del 100vh y la
     seccion no pase a medir mas que la pantalla. */
  box-sizing: border-box;
  padding-top: 96px;
  padding-bottom: 24px;
}
.proc-marco { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.proc {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}
.proc__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8A9088;
}
.proc__titulo {
  margin: 18px 0 0;
  font-size: clamp(38px, 3.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #1B4332;
}
.proc__bajada {
  margin: 22px 0 0;
  max-width: 38ch;
  font-size: 17px;
  line-height: 1.6;
  color: #5A625B;
}
/* Misma pastilla con doble flecha que el "Hablemos" del navbar y los botones
   de las cards de sistema: el relleno lima entra deslizandose desde la
   izquierda y el texto pasa a verde. Todo eso lo aporta .tc-btn-flecha; aca
   va solo la forma (verde llena, porque este vive sobre fondo claro). */
.proc__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  height: 48px;
  padding: 0 22px;
  border-radius: 9999px;
  background: #1B4332;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.proc__cta-linea { width: 1px; height: 17px; background: currentColor; opacity: 0.3; }

.proc__pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Compactas a proposito: las tres tienen que entrar juntas en la franja de
   pantalla que queda libre debajo del navbar mientras la seccion esta
   frenada. Si crecen, la primera se va abajo de la barra. */
.proc__paso {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 22px 26px;
  background: #FFFFFF;
  border: 1px solid #E6E8E3;
  border-radius: 22px;
}
/* Arrancan afuera, a la derecha, y js/main.js las trae con translateX segun
   cuanto se avanzo en el scrub. El valor inicial esta en el CSS y no en el JS
   para que, si el JS no corre, no queden las tres invisibles: sin script el
   translate no se toca nunca y hay que verlas igual. Por eso el estado
   "afuera" lo pone recien el propio script, con .proc-anima en el contenedor. */
.proc-anima [data-proc-paso] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .proc-anima [data-proc-paso] { transform: none !important; }
}
.proc__num {
  flex: 0 0 auto;
  /* Pegado a la izquierda (es la primera columna del grid) pero centrado
     contra el alto del texto de al lado, no colgado del borde de arriba. */
  align-self: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #D4A853;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.proc__cuerpo h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1A1A1A;
}
.proc__cuerpo p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: #5A625B;
  max-width: 52ch;
}
.proc__cuando {
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 16px;
  border: 1px solid #DCE2D8;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5A625B;
  white-space: nowrap;
}

/* Pantallas bajas (o con zoom, que es lo mismo en px de CSS): la pila entera
   tiene que seguir entrando en la franja libre, asi que se aprieta un poco
   mas en vez de meterse abajo del navbar. */
@media (max-height: 760px) {
  .proc-sticky { padding-top: 84px; }
  .proc__pasos { gap: 10px; }
  .proc__paso { padding: 16px 22px; gap: 16px; }
  .proc__cuerpo h3 { font-size: 18px; margin-bottom: 5px; }
  .proc__cuerpo p { font-size: 14.5px; }
  .proc__num { width: 40px; height: 40px; font-size: 17px; }
}

/* ---------- "Como se empieza" en pantallas angostas ----------
   Todo en una columna y en este orden: rotulo, titulo, bajada, cards, boton.
   El boton vive adentro de .proc__intro (en escritorio va en la columna de
   texto), asi que en vez de moverlo en el HTML se usa display:contents: el
   intro deja de generar caja y sus cuatro hijos pasan a ser hijos directos
   del grid, donde se los puede reordenar. El orden de lectura no cambia.

   La diferencia grande con escritorio: aca las tres cards no van una debajo
   de la otra sino TODAS EN EL MISMO LUGAR, una tapando a la anterior. Se
   logra metiendolas en la misma celda del grid (grid-area 1/1) en vez de
   posicionarlas absolutas: asi el contenedor sigue midiendo lo que mide la
   card mas alta, sin tener que clavarle un alto a mano. El deslizamiento
   desde el costado ya lo hace el mismo JS de escritorio, que solo toca X. */
@media (max-width: 900px) {
  .proc-scrub { min-height: 300vh; }
  /* En escritorio el sticky mide una pantalla entera y centra el contenido
     adentro. En un telefono o una tablet eso deja media pantalla vacia
     arriba del titulo, que se lee como un agujero entre esta seccion y la
     anterior. Aca el sticky mide lo que mide su contenido y queda pegado
     arriba: el unico aire es el padding que le abre paso al navbar. */
  .proc-sticky {
    height: auto;
    align-items: flex-start;
    padding-top: 110px;
    padding-bottom: 40px;
  }
  .proc-marco { padding: 0 20px; }

  .proc { grid-template-columns: 1fr; gap: 0; align-content: center; }
  .proc__intro { display: contents; }
  .proc__pasos { order: 1; margin-top: 26px; }
  .proc__cta { order: 2; margin-top: 26px; justify-self: start; }

  /* Los tres en un solo renglon: se apagan los <br> del markup (que en
     escritorio parten el titulo en tres). El espacio que quedo antes de cada
     <br> en el HTML es el que separa las palabras aca — y ademas deja un
     punto de corte, asi que si en una pantalla muy angosta no entrara,
     baja de renglon en vez de desbordar.
     El tamaño se ata al ancho para que entren los tres. Con 7.8vw entraba
     justo (330 de 335) pero en un telefono de 320px se pasaba por un pelo y
     bajaba de renglon; 7.4vw deja margen en los dos casos. */
  .proc__titulo { font-size: clamp(22px, 7.4vw, 40px); }
  .proc__titulo br { display: none; }
  .proc__bajada { margin-top: 16px; font-size: 15.5px; max-width: none; }

  /* Apiladas: misma celda, y la de mas adelante por encima. */
  .proc__pasos { display: grid; }
  .proc__paso { grid-area: 1 / 1; }
  .proc__paso:nth-child(1) { z-index: 1; }
  .proc__paso:nth-child(2) { z-index: 2; }
  .proc__paso:nth-child(3) { z-index: 3; }
  /* Con las cards una encima de otra, la de abajo se transparenta a traves
     de la de arriba si el fondo no es solido, y la sombra ayuda a leer cual
     esta adelante. Ademas se dejan estiradas a la misma altura (el stretch
     que ya trae el grid): si cada una midiera lo suyo, la mas baja no
     taparia del todo a la de atras y asomaria por abajo. */
  .proc__paso { background: #FFFFFF; box-shadow: 0 18px 36px rgba(8, 24, 16, 0.16); }

  /* Adentro de la card tambien va todo en una sola columna: las tres
     columnas de escritorio (numero | texto | chip) no entran, en 335px de
     ancho la del medio queda en ~107px y el parrafo se desarma en una tira
     de una palabra por renglon. Apilado: numero, titulo, texto y chip. */
  .proc__paso {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 14px;
    padding: 24px 22px;
  }
  .proc__num { align-self: start; }
  .proc__cuando { justify-self: start; align-self: start; margin-top: 0; }
}

/* ---------- Barra de navegacion ----------
   Fija sobre toda la pagina. Arranca transparente encima del hero oscuro, con
   texto blanco; al scrollear toma fondo claro con blur y el texto pasa a verde.
   Va fixed y no sticky porque tiene que flotar SOBRE la foto del hero, no
   ocupar lugar arriba de ella. */

.nav, .nav *, .menu-mobile, .menu-mobile * { box-sizing: border-box; }
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}
.nav.is-scrolled {
  background: rgba(244, 245, 242, 0.82);
  border-bottom-color: #E0E5DC;
}
@supports (backdrop-filter: blur(1px)) {
  .nav.is-scrolled { background: rgba(244, 245, 242, 0.66); backdrop-filter: blur(14px); }
}
.nav__barra {
  max-width: 1240px;
  margin: 0 auto;
  height: 68px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.nav__logo {
  width: 32px;
  height: 32px;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 220ms ease;
}
.nav.is-scrolled .nav__marca { color: #1B4332; }
.nav.is-scrolled .nav__logo { filter: none; }


.nav__acciones { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav__btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.nav__btn:active { transform: scale(0.97); }
.nav__btn--linea {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-weight: 600;
}
.nav__btn--linea:hover { border-color: #FFFFFF; color: #FFFFFF; }
.nav.is-scrolled .nav__btn--linea { border-color: #C9CEC6; color: #1B4332; }
.nav.is-scrolled .nav__btn--linea:hover { border-color: #1B4332; color: #1B4332; }
.nav__btn--lleno { background: #D4A853; color: #1A1A1A; }
.nav__btn--lleno:hover { background: #E0BA6C; color: #1A1A1A; }

/* Hamburguesa: tres lineas que se cruzan en X al abrir. */
.nav__hamburguesa {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: none;
  border-radius: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
}
.nav.is-scrolled .nav__hamburguesa { border-color: #C9CEC6; }
.nav__hamburguesa-caja { position: relative; width: 19px; height: 13px; display: block; }
.nav__linea {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
  transition: transform 300ms cubic-bezier(0.4, 0.14, 0.3, 1), opacity 160ms ease, background-color 220ms ease;
}
.nav.is-scrolled .nav__linea { background: #1B4332; }
.nav__linea--1 { top: 0; }
.nav__linea--2 { top: 50%; transform: translateY(-50%); }
.nav__linea--3 { bottom: 0; }
[data-nav-toggle][aria-expanded="true"] .nav__linea--1 { transform: translateY(5.5px) rotate(45deg); }
[data-nav-toggle][aria-expanded="true"] .nav__linea--2 { opacity: 0; }
[data-nav-toggle][aria-expanded="true"] .nav__linea--3 { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Panel mobile ----------
   Verde a pantalla completa, tapando tambien el header: por eso repite la
   marca y trae su propio boton de cerrar. Va arriba del header (z 60 contra
   50) en vez de esconderlo, asi no hay que sincronizar dos elementos.
   dvh y no vh: en el celular la barra del navegador entra y sale, y con vh
   el panel queda mas alto que la pantalla y los botones de abajo se pierden. */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 26px calc(28px + env(safe-area-inset-bottom));
  background: #1B4332;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-mobile[hidden] { display: none; }

/* Mismo alto que la barra de abajo, para que la X caiga justo donde estaba
   la hamburguesa y el logo no se mueva al abrir. */
.mm-tope {
  flex: 0 0 auto;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mm-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-decoration: none;
}
.mm-marca:hover { color: #FFFFFF; }
.mm-logo { width: 26px; height: 26px; object-fit: contain; }
.mm-cerrar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.mm-cerrar svg { display: block; }

/* Las filas se separan con una linea al pie de cada una — no con gap — para
   que la linea siga corrida de punta a punta tambien cuando el acordeon de
   arriba esta abierto. */
.mm-lista { flex: 1 1 auto; padding-top: 8px; }
.mm-item { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.mm-fila {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 2px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
.mm-fila:hover { color: #FFFFFF; }
.mm-chevron {
  flex: 0 0 auto;
  transition: transform 260ms cubic-bezier(.25, .46, .45, .94);
}
[data-mm-trigger][aria-expanded="true"] .mm-chevron { transform: rotate(180deg); }

/* El acordeon se abre y se cierra animado, no de golpe.
   Un display:none no se puede transicionar y un max-height obliga a
   inventar un numero: si queda corto recorta el submenu mas largo, y si
   queda de sobra el cierre arranca "sin pasar nada" hasta que el tope
   alcanza el alto real. Con el grid de una fila, animar 0fr -> 1fr va
   exactamente al alto del contenido, sea el que sea.
   El truco pide un unico hijo con min-height:0 y overflow:hidden, que es
   .mm-sub__cuerpo — el padding va ahi adentro y no aca afuera, porque un
   padding en .mm-sub seguiria ocupando alto con el acordeon cerrado. */
.mm-sub {
  display: grid;
  grid-template-rows: 0fr;
  /* El recorte va ACA, en el contenedor, y no en el hijo: un overflow:hidden
     sobre el hijo le anula el aporte de alto al calculo de la pista, y
     entonces 1fr resuelve a cero y el acordeon no abre nunca. El hijo solo
     necesita min-height:0, que es lo que lo deja encogerse hasta cero. */
  overflow: hidden;
  transition: grid-template-rows 420ms cubic-bezier(.25, .46, .45, .94);
}
[data-mm-trigger][aria-expanded="true"] + .mm-sub { grid-template-rows: 1fr; }
.mm-sub__cuerpo {
  min-height: 0;
  padding: 0 2px;
  /* Cerrado no se tabula ni lo lee un lector de pantalla. El delay hace que
     se apague recien cuando termino de plegarse, para no cortar la salida. */
  visibility: hidden;
  transition: visibility 0s linear 420ms;
}
[data-mm-trigger][aria-expanded="true"] + .mm-sub .mm-sub__cuerpo {
  visibility: visible;
  transition-delay: 0s;
}
/* El aire de abajo cuelga del ultimo link y no del envoltorio: un padding en
   el envoltorio es padding del propio item del grid, y eso le pone un piso a
   la pista — la fila plegada media 20px de mas y quedaba mas alta que la que
   no tiene submenu. Adentro del contenido, en cambio, se pliega con todo. */
.mm-sub__cuerpo > :last-child { padding-bottom: 20px; }
.mm-sub a {
  display: block;
  padding: 9px 0;
  font-size: 16.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}
.mm-sub a:hover { color: #E3FDCB; }
/* El rotulo de grupo, en el lima de interfaz: separa bloques adentro del
   mismo acordeon sin sumar otra linea divisoria. */
.mm-rotulo {
  margin: 18px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E3FDCB;
}

.mm-acciones {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  padding-top: 26px;
}
.mm-boton {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mm-boton--lleno { background: #E3FDCB; color: #1B4332; }
.mm-boton--lleno:hover { background: #E3FDCB; color: #1B4332; }
.mm-boton--linea {
  border: 1.5px solid rgba(255, 255, 255, 0.36);
  color: #FFFFFF;
}
.mm-boton--linea:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* El header fijo tapa el ancla si no se reserva el alto. */
section[id], div[id="producto"] { scroll-margin-top: 84px; }

/* La barra completa necesita 1192px medidos; debajo de 1200 manda la
   hamburguesa. El numero sale de medir marca + menu + acciones, no a ojo. */
@media (max-width: 1200px) {
  .nav__hamburguesa { display: flex; }
  /* Mas aire que en escritorio: aca abajo el hero es una card con 10px de
     margen y esquinas redondeadas, asi que con el padding de escritorio la
     marca y la hamburguesa quedan pegadas contra ese borde blanco. La barra
     tambien crece para que el boton no toque el filo de arriba de la card. */
  .nav__barra { height: 90px; padding: 0 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__linea, .nav__logo, .mm-sub, .mm-chevron { transition: none; }
  .mm-sub__cuerpo { transition-delay: 0s; }
}

/* ---------- Formulario de contacto (modal) ----------
   Etiqueta arriba en mayuscula, ejemplo en gris adentro del campo, y la
   hacienda como cuatro opciones a la vista en vez de un desplegable: se leen
   todas de una y se tocan mejor con el dedo. */

.modal, .modal * { box-sizing: border-box; }
.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__fondo { position: absolute; inset: 0; background: rgba(10, 24, 16, 0.62); }
@supports (backdrop-filter: blur(1px)) { .modal__fondo { backdrop-filter: blur(4px); } }
.modal__caja {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 40px 40px 34px;
  box-shadow: 0 30px 70px rgba(8, 24, 16, 0.3);
}

/* Entrada: el fondo aparece y la caja sube. Sin esto el modal salta de golpe
   y se lee como un error del navegador y no como una accion. */
@keyframes modal-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-caja {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.modal:not([hidden]) .modal__fondo { animation: modal-fondo 200ms ease both; }
.modal:not([hidden]) .modal__caja { animation: modal-caja 340ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }

.modal__x {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #E6E8E3; border-radius: 999px;
  background: #FFFFFF; color: #5A625B; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.modal__x:hover { background: #1B4332; border-color: #1B4332; color: #FFFFFF; }
.modal__titulo {
  margin: 0 0 28px;
  /* Sin max-width: partia el titulo en dos filas. El padding derecho le
     reserva el lugar a la X, que si no se le encima. */
  padding-right: 52px;
  font-size: 28px;
  white-space: nowrap;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1B4332;
}

.form { display: flex; flex-direction: column; gap: 18px; }
.form__campo { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.form__etiqueta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5A625B;
  padding: 0;
}
.form__etiqueta em { font-style: normal; font-weight: 600; color: #A6AEA3; letter-spacing: 0.06em; }

.form__campo input[type="text"],
.form__campo input[type="tel"],
.form__campo input[type="email"],
.form__campo textarea {
  font: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border: 1.5px solid #DCE2D8;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1A1A1A;
  width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form__campo textarea { resize: vertical; min-height: 92px; }
.form__campo input:focus, .form__campo textarea:focus {
  outline: none; border-color: #1B4332; box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.12);
}
.form__campo ::placeholder { color: #A6AEA3; }
.form__campo[data-error] input { border-color: #C2452F; }

/* Las cuatro opciones. Radios de verdad escondidas: el label hace de boton,
   asi funciona con teclado y sin JavaScript. */
.form__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { position: relative; display: block; }
.opcion input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.opcion span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 14px;
  border: 1.5px solid #DCE2D8;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.opcion:hover span { border-color: #B8C2B4; }
.opcion input:checked + span { border-color: #1B4332; background: #EAF0EA; color: #1B4332; }
.opcion input:focus-visible + span { outline: 2px solid #1B4332; outline-offset: 2px; }

/* Fuera de pantalla en vez de display:none: un bot que lee el DOM la completa
   igual, pero una persona nunca la ve ni la tabula. */
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__enviar {
  margin-top: 8px;
  padding: 16px 24px;
  border: 0;
  border-radius: 8px;
  background: #1B4332;
  color: #FFFFFF;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.form__enviar:hover:not(:disabled) { background: #265C44; }
.form__enviar:disabled { opacity: 0.6; cursor: progress; }

.form__nota {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8A9088;
}
.form__estado { margin: 0; font-size: 14.5px; line-height: 1.5; text-align: center; }
.form__estado:empty { display: none; }
.form__estado[data-tipo="error"] { color: #C2452F; }
.form__estado[data-tipo="ok"] { color: #1B4332; font-weight: 600; }

@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__caja { max-width: none; border-radius: 24px 24px 0 0; padding: 32px 22px 26px; max-height: 94dvh; }
  .modal__titulo { font-size: 22px; padding-right: 46px; }
  @keyframes modal-caja {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal:not([hidden]) .modal__fondo,
  .modal:not([hidden]) .modal__caja { animation: none; }
}

/* ---------- Botones: forma y respuesta al toque ----------
   Del componente que paso Tomas: rectangulo de esquina blanda (8px) y un
   scale(0.93) al apretar. Framer lo hace con un resorte; aca la curva de
   salida cumple la misma funcion, que es que el boton se sienta fisico.
   Los chips, los puntos del loader y las pildoras de tiempo NO son botones y
   siguen redondos. */

.nav__btn,
.proc__cta,
.form__enviar,
a[class^="hv-"][style*="border-radius: 8px"] {
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.3, 1),
              background-color 180ms ease,
              border-color 180ms ease,
              color 180ms ease;
}
.nav__btn:active,
.proc__cta:active,
.form__enviar:active:not(:disabled),
a[class^="hv-"][style*="border-radius: 8px"]:active {
  transform: scale(0.93);
}

@media (prefers-reduced-motion: reduce) {
  .nav__btn:active, .proc__cta:active, .form__enviar:active { transform: none; }
}

/* ---------- Paginas de texto (privacidad, nosotros, contacto) ----------
   Son las paginas que un agente mira para decidir si el negocio existe, asi
   que priorizan lectura sobre diseno: una columna, medida de linea acotada y
   jerarquia de encabezados de verdad. */
.pg { max-width: 760px; margin: 0 auto; padding: 40px 24px 96px; }
.pg-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 56px;
  font-size: 15px;
  color: #5A625B;
}
.pg-nav img { width: 30px; height: 30px; border-radius: 8px; }
.pg-nav a { color: #1B4332; font-weight: 700; text-decoration: none; }
.pg h1 {
  margin: 0 0 10px;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
}
.pg .pg-sub { margin: 0 0 8px; font-size: 18px; line-height: 1.5; color: #5A625B; }
.pg .pg-fecha { margin: 0 0 48px; font-size: 14px; color: #8A9088; }
.pg h2 {
  margin: 44px 0 12px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1A1A1A;
}
.pg p, .pg li { font-size: 16.5px; line-height: 1.65; color: #3D453E; }
.pg p { margin: 0 0 16px; }
.pg ul { margin: 0 0 16px; padding-left: 22px; }
.pg li { margin-bottom: 8px; }
.pg a { color: #1B4332; }
.pg table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 15.5px; }
.pg th, .pg td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #E6E8E3; vertical-align: top; }
.pg th { font-weight: 700; color: #1A1A1A; }
.pg td { color: #3D453E; }
/* Dato que todavia falta completar. Se ve, a proposito: un hueco visible se
   arregla, uno disimulado se publica. */
.pg mark { background: #FBF0DA; color: #8A6A1E; padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.pg-pie { margin-top: 64px; padding-top: 24px; border-top: 1px solid #E6E8E3; font-size: 15px; color: #8A9088; }
.pg-pie a { color: #1B4332; font-weight: 600; }

/* ---------- Recorrida y entrada ----------
   La RECORRIDA es el viaje a una ancla: en vez de saltar, la pagina se
   desplaza. La hace js/main.js con su propia curva, no `scroll-behavior:
   smooth`, porque las dos juntas se pelean por el scroll. Lo unico que va
   aca es el margen para que la barra fija no tape el titulo de destino.

   (Antes tambien vivia aca la animacion de entrada de la portada al cargar
   la pagina — se saco a pedido; el hero ahora aparece de una, sin blur ni
   fade.) */
[id] { scroll-margin-top: 96px; }

/* ---------- Navbar con menu desplegable ----------
   Reproduce el patron de Radix NavigationMenu en HTML plano: un solo viewport
   cuyo alto se anima al del panel activo. Por eso al pasar de "Cría" a
   "Recursos" el panel se transforma en vez de cerrarse y volver a abrirse.

   Los tokens salen del style guide: verde #1B4332, lima #E3FDCB para la
   tarjeta destacada, radio grande 32px para el panel, y la curva y duracion
   por defecto del sistema. */

/* El menu viejo (.nav__links) ya no existe en el markup; lo reemplaza esto. */
.nv__menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-start; margin-left: 18px; }
.nv__lista { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nv__item { display: flex; }

/* Trigger y enlace comparten forma: la unica diferencia es el chevron. */
.nv__trigger,
.nv__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(.25, .46, .45, .94), color 200ms cubic-bezier(.25, .46, .45, .94);
}
.nv__trigger:hover, .nv__enlace:hover,
.nv__trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
.nav.is-scrolled .nv__trigger,
.nav.is-scrolled .nv__enlace { color: #1B4332; }
.nav.is-scrolled .nv__trigger:hover,
.nav.is-scrolled .nv__enlace:hover,
.nav.is-scrolled .nv__trigger[aria-expanded="true"] { background: rgba(27, 67, 50, 0.08); }


/* Acciones de la derecha: "Entrar" pelado y la pastilla con la flecha. */
.nv__login {
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 6px;
  transition: color 200ms cubic-bezier(.25, .46, .45, .94);
}
.nv__login:hover { color: #E3FDCB; }
.nav.is-scrolled .nv__login { color: #1B4332; }
.nav.is-scrolled .nv__login:hover { opacity: 0.7; }

.nv__pastilla {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms cubic-bezier(.25, .46, .45, .94), transform 120ms ease;
}
.nv__pastilla:hover { background: rgba(255, 255, 255, 0.26); }
.nv__pastilla:active { transform: scale(0.97); }
.nv__pastilla-linea { width: 1px; height: 18px; background: currentColor; opacity: 0.4; }
.nv__flecha { width: 17px; height: 17px; }
.nav.is-scrolled .nv__pastilla { background: #1B4332; color: #FFFFFF; }
.nav.is-scrolled .nv__pastilla:hover { background: #143529; }

/* ---- El viewport ---- */
.nv__viewport {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;   /* pegado a la izquierda, no centrado */
  padding: 0 40px;
  pointer-events: none;
}
.nv__lienzo {
  position: relative;
  /* --nv-x lo calcula el JS: es la distancia desde el borde del viewport hasta
     la solapa que se abrio, acotada para que el panel no se pase por la
     derecha. Asi cada menu cae debajo de su propio boton. */
  margin-left: var(--nv-x, 0px);
  /* El ancho tambien se anima: el panel abraza el contenido de cada solapa en
     vez de ocupar todo el ancho. Los dos valores los mide el JS. */
  width: var(--nv-ancho, 0px);
  max-width: 100%;
  height: var(--nv-alto, 0px);
  overflow: hidden;
  border-radius: 32px;
  background: #FFFFFF;
  box-shadow: 0 26px 60px rgba(8, 24, 16, 0.16);
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  transition:
    margin-left 320ms cubic-bezier(.25, .46, .45, .94),
    width 320ms cubic-bezier(.25, .46, .45, .94),
    height 320ms cubic-bezier(.25, .46, .45, .94),
    opacity 200ms cubic-bezier(.25, .46, .45, .94),
    transform 260ms cubic-bezier(.25, .46, .45, .94);
}
.nv-abierto .nv__lienzo { opacity: 1; transform: none; pointer-events: auto; }

/* Los paneles se apilan en el mismo punto; solo el activo se ve. Quedan en el
   flujo (no display:none) para poder medir su alto antes de mostrarlos. */
.nv__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  padding: 34px 40px 38px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(.25, .46, .45, .94);
}
.nv__panel.is-activo { opacity: 1; pointer-events: auto; }

/* Las columnas las define el contenido: los casos de uso traen tres y
   Recursos y Sobre traen dos. */
.nv__cols { display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 40px; align-items: start; }
.nv__col { display: flex; flex-direction: column; align-items: flex-start; min-width: 148px; max-width: 260px; }
.nv__rotulo {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 67, 50, 0.55);
}
.nv__grande {
  /* Todos los links de los paneles al mismo tamano: los titulos de articulo son
     largos y a 23px se iban a tres renglones cada uno, lo que estiraba el panel
     de mas. Los rotulos siguen distinguiendose por las mayusculas y el color. */
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #1B4332;
  text-decoration: none;
  transition: color 200ms cubic-bezier(.25, .46, .45, .94), transform 200ms cubic-bezier(.25, .46, .45, .94);
}
.nv__grande:hover { color: #C0912E; }

/* La tarjeta destacada, sobre lima: el unico lugar del navbar con color. */
/* Hay dos tarjetas destacadas y no una.

   --foto, en los casos de uso: la imagen ocupa la tarjeta entera y el texto va
   ENCIMA, con un velo oscuro abajo para que se lea. Es la forma de la
   referencia.

   --lima, en Recursos y Sobre: fondo lima, el rotulo arriba y despues una fila
   con la imagen chica a la izquierda y el titulo al lado. */
.nv__destacado { display: block; text-decoration: none; }
.nv__destacado-tit {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #1B4332;
}

.nv__destacado--foto {
  position: relative;
  width: 316px;
  aspect-ratio: 4 / 3.4;
  border-radius: 22px;
  overflow: hidden;
  background: #1B4332;
}
.nv__destacado--foto .nv__tapa { position: absolute; inset: 0; border-radius: 0; font-size: 11px; }
.nv__destacado--foto .nv__tapa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El velo: sin esto el texto blanco se pierde sobre una foto clara. */
.nv__destacado--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 30, 20, 0.88) 0%, rgba(12, 30, 20, 0.5) 34%, rgba(12, 30, 20, 0.06) 62%);
}
.nv__destacado-cuerpo { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; }
.nv__rotulo--claro { color: rgba(255, 255, 255, 0.82); margin-bottom: 10px; }
.nv__destacado-tit--claro { color: #FFFFFF; }
.nv__destacado--foto:hover .nv__tapa > img { transform: scale(1.04); }
.nv__destacado--foto .nv__tapa > img { transition: transform 420ms cubic-bezier(.25, .46, .45, .94); }

.nv__destacado--lima {
  width: 356px;
  padding: 22px;
  border-radius: 22px;
  background: #E3FDCB;
  transition: background-color 200ms cubic-bezier(.25, .46, .45, .94);
}
.nv__destacado--lima:hover { background: #D7F7B8; }
.nv__destacado-fila { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.nv__tapa { position: relative; inset: auto; border-radius: 12px; overflow: hidden; font-size: 10px; }
.nv__tapa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 16:9, igual que la portada. En 4/3 recortaba un cuarto del ancho, y en una
   miniatura de 132px ese recorte se leia como un pedazo suelto de la foto. */
.nv__tapa--chica { aspect-ratio: 16 / 9; }

@media (prefers-reduced-motion: reduce) {
  .nv__lienzo, .nv__panel, .nv__chevron, .nv__grande { transition: none; }
}

/* ---------- Boton con flecha ----------
   El relleno entra de izquierda a derecha y, al mismo tiempo, la flecha sale
   por la derecha mientras otra identica entra por la izquierda. Son dos flechas
   dentro de una caja recortada: con una sola, el gesto se lee como que la
   flecha se escapa; con dos, se lee como avance.

   Va en .tc-btn-flecha para poder ponerselo a cualquier boton con flecha, no
   solo al del navbar. */
.tc-btn-flecha { position: relative; overflow: hidden; isolation: isolate; }
/* .sist-card__btn necesita quedar anclado (absolute) a la esquina de la card,
   no relative como pide .tc-btn-flecha por defecto. El selector compuesto le
   gana por especificidad, sin importar el orden en el archivo. */
.sist-card__btn.tc-btn-flecha { position: absolute; }
.tc-btn-flecha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #E3FDCB;
  transform: translateX(-101%);
  transition: transform 460ms cubic-bezier(.25, .46, .45, .94);
}
.tc-btn-flecha:hover::before,
.tc-btn-flecha:focus-visible::before { transform: translateX(0); }
/* Con el relleno lima adentro, el texto blanco desaparece: pasa a verde. */
.tc-btn-flecha:hover, .tc-btn-flecha:focus-visible { color: #1B4332; }

.tc-flechas {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  overflow: hidden;
  display: inline-flex;
}
.tc-flechas svg {
  position: absolute;
  top: 0;
  width: 17px;
  height: 17px;
  transition: transform 460ms cubic-bezier(.25, .46, .45, .94);
}
.tc-flechas svg:first-child { left: 0; }
.tc-flechas svg:last-child { left: -17px; }
.tc-btn-flecha:hover .tc-flechas svg,
.tc-btn-flecha:focus-visible .tc-flechas svg { transform: translateX(17px); }

/* Sobre fondo claro el relleno lima no contrasta: ahi entra el verde. */
.nav.is-scrolled .tc-btn-flecha::before { background: #143529; }
.nav.is-scrolled .tc-btn-flecha:hover { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .tc-btn-flecha::before, .tc-flechas svg { transition: none; }
}

/* Va al final a proposito: los media query no suman especificidad, asi que si
   esto quedara antes de la definicion de .nv__menu, el display:flex de mas
   abajo le ganaria y el menu se veria junto con la hamburguesa. */
@media (max-width: 1200px) {
  .nv__menu, .nav__acciones, .nv__viewport { display: none !important; }
}

/* ---------- Hero con video scrubeado ----------
   La card ocupa casi toda la pantalla y deja asomar el fondo de la pagina
   alrededor. El alto va en dvh y no vh porque en mobile la barra del navegador
   entra y sale, y con vh la card queda cortada abajo. */
.hero {
  position: relative;
  height: 100dvh;
  padding: 10px;
  background: #F4F5F2;
  box-sizing: border-box;
}
.hero__card {
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #0F2A1E;                       /* mientras el primer frame decodifica */
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
  opacity: 0;
  transition: opacity 600ms ease;
}
.hero.esta-listo .hero__video { opacity: 1; }

.hero__falloff, .hero__velo { position: absolute; inset: 0; pointer-events: none; }
.hero__falloff {
  background: linear-gradient(180deg, rgba(10, 26, 18, 0.42), rgba(10, 26, 18, 0) 30%, rgba(10, 26, 18, 0.14) 68%, rgba(10, 26, 18, 0.6));
}
.hero__velo {
  background: radial-gradient(ellipse 62% 44% at 50% 50%, rgba(10, 26, 18, 0.66), rgba(10, 26, 18, 0) 72%);
}

.hero__titulo, .hero__cierre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  text-align: center;
  pointer-events: none;
  will-change: transform, filter, opacity;
}
/* Vidrio de verdad, no neon. La version anterior tenia un trazo blanco
   alrededor de cada letra (-webkit-text-stroke) mas un brillo difuso en el
   text-shadow: esa combinacion — borde parejo + resplandor — es literalmente
   como se dibuja un letrero de neon en CSS. Se fue.

   Esta version es transparencia real: el degrade lleva alfa (rgba, no hex), asi
   que el video del fondo se ve DEBAJO de la letra, mas fuerte arriba y
   desvaneciendose abajo — como un vidrio esmerilado, no un color solido con
   forma de letra. El unico text-shadow que queda es una sombra angosta hacia
   abajo, para que la letra no se pierda contra un cielo claro; no tiene halo. */
.hero__titulo h1 {
  margin: 0;
  font-size: clamp(34px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.62) 40%,
    rgba(210, 226, 238, 0.36) 72%,
    rgba(170, 196, 216, 0.16) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;   /* Safari necesita esto ademas de color */
  text-shadow: 0 2px 10px rgba(4, 14, 24, 0.3);
  filter: drop-shadow(0 8px 20px rgba(4, 14, 24, 0.25));
}
/* La palabra dorada: mismo criterio, paleta de marca en vez de celeste. */
.hero__titulo h1 span {
  background: linear-gradient(180deg,
    rgba(255, 240, 210, 0.9) 0%,
    rgba(240, 208, 150, 0.62) 40%,
    rgba(212, 168, 83, 0.4) 72%,
    rgba(166, 122, 46, 0.2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(40, 26, 4, 0.3);
}
.hero__cierre { opacity: 0; }
.hero__cierre p {
  margin: 0;
  font-size: clamp(20px, 3.2vw, 38px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

/* ---------- El hero en pantallas angostas ----------
   El video es 16:9 y la card es vertical, asi que con object-fit: cover en un
   telefono se ve apenas una franja del centro: de 1408px de video escalado
   entran 355, un cuarto. Centrada, esa franja corta justo donde esta la
   persona con el telefono, y el ultimo frame termina mostrando solo el
   aparato. Corriendo el encuadre hacia la derecha del cuadro (que es correr
   el video hacia la izquierda) la franja pasa a caer sobre la persona.
   En escritorio no hace falta: ahi la card es apaisada y casi no recorta. */
@media (max-width: 1000px) {
  .hero__video { object-position: 74% center; }
  /* Con la franja tan angosta, los tamaños de escritorio quedan chicos: el
     clamp los estaba dejando en su piso porque el termino en vw casi no
     aporta a 375px de ancho. */
  .hero__titulo h1 { font-size: clamp(42px, 11.5vw, 60px); }
  .hero__cierre p { font-size: clamp(26px, 7vw, 38px); }
  .hero__titulo, .hero__cierre { padding: 0 8%; }
}

.hero__pista {
  position: absolute;
  bottom: clamp(20px, 6vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: opacity 400ms ease;
}
.hero__pista svg { animation: hero-rebote 1.6s ease-in-out infinite; }
@keyframes hero-rebote {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* Solo aparece con el teclado: es la salida para el que no puede o no quiere
   scrubear el video entero. */
.hero__saltar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 9px 16px;
  border: 0;
  border-radius: 9999px;
  background: rgba(10, 26, 18, 0.7);
  color: #FFFFFF;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.hero__saltar:focus-visible { opacity: 1; pointer-events: auto; }

.hero__barra { position: absolute; inset: auto 0 0 0; height: 2px; background: rgba(255, 255, 255, 0.14); }
.hero__barra-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(212, 168, 83, 0.5), rgba(212, 168, 83, 1));
}

@media (prefers-reduced-motion: reduce) {
  .hero__pista svg { animation: none; }
  .hero__video { transition: none; }
}

/* ---------- Pie de pagina ----------
   Todo esto vivia inline. Se pasa a clases con los MISMOS valores para poder
   convertirlo en acordeon en telefono y tablet sin tocar escritorio.

   Los titulos de columna son <button> y no <div>: en pantalla chica abren y
   cierran su bloque de links. En escritorio se les saca todo el aspecto de
   boton y quedan como el rotulo de siempre. */
.pie { background: #1A1A1A; padding: 76px 0 34px; }
.pie__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 0.85fr);
  gap: 40px;
}
.pie__marca-fila { display: flex; align-items: center; gap: 10px; }
.pie__logo { width: 32px; height: 32px; display: block; filter: brightness(1.25); }
.pie__nombre { font-size: 21px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.02em; }
.pie__lema { margin: 16px 0 0; font-size: 15px; color: #8A8A88; }

.pie-col__tit {
  /* Reset del boton: en escritorio tiene que verse igual que el rotulo que
     habia antes, sin fondo, sin borde y sin mano de "clickeable". */
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: default;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFFFFF;
}
.pie-chevron { display: none; }   /* solo aparece en el acordeon */
.pie-raya { width: 26px; height: 2px; background: #D4A853; margin-top: 9px; }
.pie-col__links { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.pie-col__links a { font-size: 14px; color: #9A9A98; }

.pie__cierre {
  max-width: 1240px;
  margin: 54px auto 0;
  padding: 26px 40px 0;
  border-top: 1px solid #2E2E2C;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pie__copy { font-size: 13px; color: #7A7A78; }
.pie__redes { display: flex; gap: 12px; }
.pie__red {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #3A3A38;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- El pie en telefono y tablet ----------
   Una columna, y cada bloque de links pasa a ser un acordeon. A diferencia
   del menu del navbar, estos abren SOLO con click o con el dedo: no hay
   apertura por hover. */
@media (max-width: 900px) {
  .pie { padding: 52px 0 28px; }
  .pie__grid { grid-template-columns: 1fr; gap: 0; padding: 0 24px; }

  .pie__marca { padding-bottom: 26px; }
  .pie__nombre { font-size: 24px; }

  /* Cada columna es una fila con su linea al pie, como en la referencia. */
  .pie-col { border-top: 1px solid #2E2E2C; }
  .pie-col:last-of-type { border-bottom: 1px solid #2E2E2C; }
  .pie-col__tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 0;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  .pie-chevron {
    display: block;
    flex: 0 0 auto;
    transition: transform 260ms cubic-bezier(.25, .46, .45, .94);
  }
  [data-pie-trigger][aria-expanded="true"] .pie-chevron { transform: rotate(180deg); }
  /* La rayita dorada es del encabezado de escritorio; aca las filas ya se
     separan con la linea de arriba. */
  .pie-raya { display: none; }

  /* Mismo mecanismo de alto que el acordeon del navbar: la pista del grid va
     de 0fr a 1fr, que llega justo al alto del contenido sin numeros magicos.
     El recorte va en el contenedor, no en el hijo. */
  .pie-col__panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 380ms cubic-bezier(.25, .46, .45, .94);
  }
  [data-pie-trigger][aria-expanded="true"] + .pie-raya + .pie-col__panel { grid-template-rows: 1fr; }
  .pie-col__links {
    min-height: 0;
    margin-top: 0;
    gap: 0;
    visibility: hidden;
    transition: visibility 0s linear 380ms;
  }
  [data-pie-trigger][aria-expanded="true"] + .pie-raya + .pie-col__panel .pie-col__links {
    visibility: visible;
    transition-delay: 0s;
  }
  /* El aire cuelga de cada link y no del contenedor: un padding en el item
     del grid le pone piso a la pista y la fila cerrada mediria de mas. */
  .pie-col__links a { padding: 8px 0; font-size: 15px; }
  .pie-col__links a:last-child { padding-bottom: 20px; }

  .pie__cierre {
    margin-top: 26px;
    padding: 22px 24px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pie-col__panel, .pie-chevron { transition: none; }
  .pie-col__links { transition-delay: 0s; }
}

/* ==========================================================================
   Paginas de sistema productivo (/cria, /invernada, /agricultura) y de
   herramienta (/cria/tacto-y-prenez, ...). Se generan con tools/sistemas.js.

   Todo lo de aca abajo arranca en escritorio y se ajusta despues en los dos
   media query del final del bloque: primero tablet (900px) y despues telefono
   (600px), el mismo corte que usa el resto del sitio.
   ========================================================================== */

.sol { display: block; }

/* ---------- Encabezado ---------- */
/* El navbar es fixed y mide 68px; 140 arriba lo despeja y deja aire de sobra
   para que el rotulo no arranque pegado a la barra. */
.sol-tope {
  max-width: 1240px;
  margin: 0 auto;
  padding: 140px 40px 0;
  text-align: center;
}
.sol-rotulo,
.sol-tope__rotulo {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A9088;
}
/* Las tres solapas, en una pastilla comun. Repiten la navegacion del navbar
   a mitad de pagina porque quien llega por buscador cae directo aca. */
.sol-pills {
  /* border-box porque en telefono va a width:100%: con content-box el padding
     y el borde se suman por afuera y la pastilla sale 12px mas ancha que las
     cards de la misma pagina. */
  box-sizing: border-box;
  display: inline-flex;
  gap: 4px;
  margin-top: 20px;
  padding: 5px;
  border: 1px solid #E0E5DC;
  border-radius: 9999px;
  background: #FFFFFF;
}
.sol-pill {
  padding: 9px 24px;
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 600;
  color: #5A625B;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.sol-pill:hover { background: #EDF0EA; color: #1B4332; }
.sol-pill--activa,
.sol-pill--activa:hover { background: #1B4332; color: #FFFFFF; }
.sol-tope__titulo {
  margin: 30px 0 0;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #1B4332;
}
.sol-tope__bajada {
  max-width: 660px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: #5A625B;
}

/* ---------- Texto de entrada + tarjeta con foto ---------- */
.sol-intro {
  max-width: 1240px;
  margin: 0 auto;
  padding: 78px 40px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.sol-intro__lead {
  margin: 14px 0 0;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #1B4332;
}
.sol-intro__p {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.68;
  color: #4E564F;
}
.sol-intro__btn {
  /* Idem: en telefono es width:100% dentro de la columna. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  height: 50px;
  padding: 0 26px;
  border: 1.5px solid #1B4332;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  color: #1B4332;
  text-decoration: none;
}
/* El relleno de .tc-btn-flecha es lima, que sobre fondo claro no contrasta:
   aca entra el verde y el texto pasa a blanco, igual que hace el navbar
   cuando toma fondo claro. */
.sol-intro__btn.tc-btn-flecha::before { background: #1B4332; }
.sol-intro__btn.tc-btn-flecha:hover,
.sol-intro__btn.tc-btn-flecha:focus-visible { color: #FFFFFF; }

/* La tarjeta: foto entera, la fecha recortada sobre la esquina de arriba a la
   derecha (mismo truco que .nota__fecha: no es una etiqueta apoyada encima,
   es un pedazo que la foto no ocupa) y el texto abajo sobre el degradado. */
.sol-tarjeta {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3.4;
  border-radius: 24px;
  overflow: hidden;
  background: #F4F5F2;
}
.sol-tarjeta__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sol-tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 18, 0) 0%, rgba(12, 26, 18, 0) 42%, rgba(12, 26, 18, 0.6) 72%, rgba(10, 22, 15, 0.9) 100%);
  pointer-events: none;
}
.sol-tarjeta__fecha {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 10px 16px 12px 18px;
  border-bottom-left-radius: 18px;
  background: #F4F5F2;
  color: #1B4332;
  font-size: 12.5px;
  font-weight: 700;
}
.sol-tarjeta__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 26px 24px;
}
.sol-tarjeta__rotulo {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.sol-tarjeta__titulo {
  margin: 8px 0 0;
  font-size: 23px;
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #FFFFFF;
}

/* ---------- Herramientas ---------- */
.sol-herr {
  max-width: 1240px;
  margin: 0 auto;
  padding: 108px 40px 0;
}
.sol-herr__titulo {
  margin: 0;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
  text-align: center;
}
.sol-herr__bajada {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: #5A625B;
  text-align: center;
}
.sol-grupo { margin-top: 52px; }
.sol-grupo__titulo {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E0E5DC;
  font-size: 19px;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1B4332;
}
.sol-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* La card entera es el link. El "Ver mas" no es un boton aparte: es la pista
   de que se puede clickear, y por eso se mueve con el hover de la card y no
   con el suyo propio. */
.sol-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid #E0E5DC;
  border-radius: 18px;
  background: #FFFFFF;
  text-decoration: none;
  transition: border-color 220ms ease, transform 220ms ease;
}
.sol-card:hover { border-color: #1B4332; transform: translateY(-3px); }
.sol-card:focus-visible { outline: 2px solid #1B4332; outline-offset: 3px; }
.sol-card__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #E9F3E2;
  color: #1B4332;
}
.sol-card__icono svg { width: 21px; height: 21px; }
.sol-card__titulo {
  margin: 18px 0 0;
  font-size: 17.5px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1B4332;
}
.sol-card__texto {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5A625B;
}
/* margin-top:auto pega el "Ver mas" al pie: asi las tres cards de una fila
   lo tienen a la misma altura aunque los textos midan distinto. */
.sol-card__mas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1B4332;
}
.sol-card:hover .tc-flechas svg { transform: translateX(17px); }

/* ---------- La ventaja ---------- */
.sol-ventajas {
  max-width: 1240px;
  margin: 0 auto;
  padding: 106px 40px 0;
}
.sol-ventajas__titulo {
  margin: 0;
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
  text-align: center;
}
.sol-ventajas__grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 44px;
}
.sol-ventaja { text-align: center; }
.sol-ventaja__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: #E9F3E2;
  color: #1B4332;
}
.sol-ventaja__icono svg { width: 22px; height: 22px; }
.sol-ventaja__titulo {
  margin: 16px 0 0;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1B4332;
}
.sol-ventaja__texto {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: #5A625B;
}

/* ---------- Cierre verde ---------- */
/* Va a ancho completo y no dentro de los 1240px: es el corte antes del pie y
   necesita leerse como una banda, igual que en la referencia. */
.sol-cierre {
  margin-top: 110px;
  padding: 76px 40px 84px;
  background: #1B4332;
  text-align: center;
}
.sol-cierre__insignia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: #E3FDCB;
}
.sol-cierre__insignia svg { width: 22px; height: 22px; }
.sol-cierre__titulo {
  margin: 22px 0 0;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #FFFFFF;
}
.sol-cierre__texto {
  max-width: 560px;
  margin: 16px auto 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.sol-cierre__botones {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.sol-cierre__btn {
  /* En telefono los botones se apilan en un flex column y se estiran al ancho
     del contenedor: sin border-box, los 26px de padding de cada lado los
     empujan por fuera de la banda. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 26px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.sol-cierre__btn--lleno {
  border: 1.5px solid rgba(227, 253, 203, 0.5);
  color: #E3FDCB;
}
.sol-cierre__btn--linea {
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  transition: background-color 200ms ease;
}
.sol-cierre__btn--linea:hover { background: rgba(255, 255, 255, 0.1); }
.sol-cierre__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin-top: 34px;
}
.sol-cierre__item {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
/* El tilde va de pseudo-elemento y no de SVG suelto: son tres y no cambian. */
.sol-cierre__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-right: 11px;
  border: solid #E3FDCB;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* ==========================================================================
   Pagina de herramienta
   ========================================================================== */

.hrm-tope {
  max-width: 1240px;
  margin: 0 auto;
  padding: 130px 40px 0;
}
.hrm-miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #8A9088;
}
.hrm-miga a { color: #5A625B; text-decoration: none; }
.hrm-miga a:hover { color: #1B4332; text-decoration: underline; }
.hrm-miga__aca { color: #8A9088; }
.hrm-tope__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: 30px;
  border-radius: 14px;
  background: #E9F3E2;
  color: #1B4332;
}
.hrm-tope__icono svg { width: 26px; height: 26px; }
.hrm-tope__titulo {
  margin: 20px 0 0;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #1B4332;
}
.hrm-tope__bajada {
  max-width: 720px;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: #5A625B;
}

.hrm-cuerpo {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 64px;
  align-items: start;
}
.hrm-texto { max-width: 680px; }
.hrm-p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #4E564F;
}
.hrm-h2 {
  margin: 42px 0 16px;
  font-size: 23px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1B4332;
}
.hrm-puntos { margin: 0; padding: 0; list-style: none; }
.hrm-puntos li {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid #E4E7E1;
  font-size: 15.5px;
  line-height: 1.55;
  color: #4E564F;
}
.hrm-puntos li:last-child { border-bottom: 0; }
.hrm-puntos li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 18px;
  width: 5px;
  height: 9px;
  border: solid #1B4332;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* El ejemplo de audio. Fondo lima y no blanco: es la voz de otro, no del
   sitio, y conviene que se lea distinto del resto del cuerpo. */
.hrm-audio {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: #E9F3E2;
}
.hrm-audio__icono { flex: 0 0 auto; color: #1B4332; }
.hrm-audio__icono svg { width: 22px; height: 22px; display: block; }
.hrm-audio__texto {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  font-style: italic;
  color: #1B4332;
}

.hrm-notas { margin: 0; padding: 0; list-style: none; }
.hrm-notas li { border-bottom: 1px solid #E4E7E1; }
.hrm-notas li:last-child { border-bottom: 0; }
.hrm-notas a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #1B4332;
  text-decoration: none;
}
.hrm-notas a:hover { text-decoration: underline; }
.hrm-notas a:hover .tc-flechas svg { transform: translateX(17px); }

/* La columna del costado queda pegada al scroll: en una pagina larga es lo
   que evita tener que volver arriba para saltar a otra herramienta. */
.hrm-lado {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hrm-lado__caja {
  padding: 24px 22px;
  border: 1px solid #E0E5DC;
  border-radius: 18px;
  background: #FFFFFF;
}
.hrm-lado__sistema {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 19px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1B4332;
  text-decoration: none;
}
.hrm-lado__sistema:hover .tc-flechas svg { transform: translateX(17px); }
.hrm-lado__bajada {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5A625B;
}
.hrm-lado__lista { margin: 12px 0 0; padding: 0; list-style: none; }
.hrm-lado__lista li { border-top: 1px solid #E4E7E1; }
.hrm-lado__lista li:first-child { border-top: 0; }
.hrm-lado__lista a {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  color: #4E564F;
  text-decoration: none;
}
.hrm-lado__lista a:hover { color: #1B4332; text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .sol-tope { padding: 116px 24px 0; }
  .sol-tope__titulo { font-size: clamp(32px, 5.4vw, 44px); }
  .sol-tope__bajada { font-size: 16.5px; }

  .sol-intro {
    padding: 56px 24px 0;
    grid-template-columns: 1fr;
    gap: 34px;
  }
  /* La foto arriba del texto: en una columna, entrar por la imagen ubica
     mucho mas rapido que entrar por tres parrafos. */
  .sol-tarjeta { order: -1; aspect-ratio: 4 / 3; }
  .sol-intro__lead { font-size: 26px; }

  .sol-herr { padding: 76px 24px 0; }
  .sol-herr__titulo { font-size: 32px; }
  .sol-grilla { grid-template-columns: repeat(2, 1fr); }
  .sol-grupo { margin-top: 40px; }

  .sol-ventajas { padding: 76px 24px 0; }
  .sol-ventajas__titulo { font-size: 28px; }
  .sol-ventajas__grilla { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }

  .sol-cierre { margin-top: 80px; padding: 60px 24px 66px; }
  .sol-cierre__titulo { font-size: 30px; }

  .hrm-tope { padding: 110px 24px 0; }
  .hrm-tope__titulo { font-size: clamp(30px, 4.8vw, 38px); }
  .hrm-tope__bajada { font-size: 17px; }
  /* La columna del costado deja de estar al costado: pasa abajo y deja de
     ser sticky, que en una sola columna solo tapa contenido. */
  .hrm-cuerpo {
    padding: 42px 24px 0;
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .hrm-lado { position: static; }
  .hrm-lado__lista { columns: 2; column-gap: 24px; }
  .hrm-lado__lista li { break-inside: avoid; }
}

/* ---------- Telefono ---------- */
@media (max-width: 600px) {
  .sol-tope { padding: 104px 20px 0; }
  .sol-pills {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .sol-pill { flex: 1; padding: 9px 6px; text-align: center; font-size: 13.5px; }
  .sol-tope__titulo { font-size: 30px; }
  .sol-tope__bajada { font-size: 15.5px; }

  .sol-intro { padding: 44px 20px 0; }
  .sol-tarjeta { aspect-ratio: 4 / 3.4; border-radius: 20px; }
  .sol-tarjeta__titulo { font-size: 20px; }
  .sol-intro__lead { font-size: 23px; }
  .sol-intro__p { font-size: 15.5px; }
  .sol-intro__btn { width: 100%; justify-content: center; }

  .sol-herr { padding: 62px 20px 0; }
  .sol-herr__titulo { font-size: 27px; }
  .sol-grilla { grid-template-columns: 1fr; gap: 14px; }

  .sol-ventajas { padding: 62px 20px 0; }
  .sol-ventajas__grilla { grid-template-columns: 1fr; gap: 26px; }
  /* En una columna, el icono al costado del texto ocupa mucho menos alto que
     centrado arriba, y la lista se recorre de un vistazo. */
  .sol-ventaja {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 0 16px;
    text-align: left;
  }
  .sol-ventaja__icono { grid-row: span 2; }
  .sol-ventaja__titulo { margin-top: 2px; }

  .sol-cierre { margin-top: 66px; padding: 52px 20px 58px; }
  .sol-cierre__titulo { font-size: 26px; }
  .sol-cierre__botones { flex-direction: column; }
  .sol-cierre__btn { justify-content: center; }
  .sol-cierre__items { gap: 10px 20px; }

  .hrm-tope { padding: 96px 20px 0; }
  .hrm-tope__titulo { font-size: 28px; }
  .hrm-tope__bajada { font-size: 16px; }
  .hrm-cuerpo { padding: 34px 20px 0; gap: 34px; }
  .hrm-p { font-size: 15.5px; }
  .hrm-h2 { font-size: 20px; margin-top: 34px; }
  .hrm-audio { padding: 18px; }
  .hrm-audio__texto { font-size: 15.5px; }
  .hrm-lado__lista { columns: 1; }
}

/* ==========================================================================
   /nosotros. Se genera con tools/nosotros.js y reusa de las paginas de
   sistema el encabezado (.sol-tope) y la banda verde de cierre (.sol-cierre).
   Arranca en escritorio; los ajustes de tablet y telefono van al final.
   ========================================================================== */

/* La foto de archivo, a lo ancho de la columna. Sin recorte de alto en
   escritorio: es una foto de una sola vez y vale la pena verla entera. */
.nos-foto {
  max-width: 1240px;
  margin: 0 auto;
  padding: 62px 40px 0;
}
/* Sin recorte: la foto es 4:3 y el nene esta casi de punta a punta del
   alto, asi que cualquier object-fit:cover que achique la caja le come la
   cabeza o las manos. Se limita el ancho en vez del alto, que es lo unico
   que no rompe el encuadre. A 1000px queda de 750 de alto. */
.nos-foto img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  border-radius: 26px;
}

/* ---------- La cita ---------- */
.nos-cita {
  max-width: 1240px;
  margin: 0 auto;
  padding: 62px 40px 0;
}
.nos-cita__caja {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding: 44px 46px;
  border-radius: 26px;
  background: #1B4332;
}
/* .img-slot viene con position:absolute e inset:0 para tapar a su contenedor.
   Aca es una pieza del grid con su propio tamano, asi que hay que soltarlo. */
.nos-cita__retrato {
  position: relative;
  inset: auto;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.nos-cita__texto {
  margin: 0;
  font-size: 23px;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}
.nos-cita__texto::before { content: "\201C"; }
.nos-cita__texto::after { content: "\201D"; }
.nos-cita__firma { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 22px 0 0; }
.nos-cita__nombre { font-size: 15px; font-weight: 700; color: #E3FDCB; }
.nos-cita__rol { font-size: 15px; color: rgba(255, 255, 255, 0.66); }
.nos-cita__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}
.nos-cita__linkedin svg { width: 17px; height: 17px; }
.nos-cita__linkedin:hover { color: #E3FDCB; text-decoration: underline; }

/* ---------- Bloques de texto ---------- */
/* El titulo a la izquierda y el cuerpo a la derecha, como en la referencia:
   con el titulo arriba, un bloque de tres parrafos se lee como un muro. */
.nos-texto {
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 40px 0;
}
.nos-bloque {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  padding: 40px 0;
  border-top: 1px solid #E0E5DC;
}
.nos-bloque__titulo {
  margin: 0;
  font-size: 27px;
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
}
.nos-bloque__cuerpo { max-width: 700px; }
.nos-bloque__cuerpo p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #4E564F;
}
.nos-bloque__cuerpo p:last-child { margin-bottom: 0; }
.nos-bloque__cuerpo strong { color: #1B4332; }

/* ---------- Linea de tiempo ---------- */
.nos-linea {
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 40px 0;
}
/* La linea es el borde izquierdo de la lista y los puntos son ::before de
   cada item: sin elementos de adorno sueltos en el HTML. */
/* Tres piezas: el borde izquierdo es la linea sin recorrer, el ::after es la
   parte ya recorrida, y el ::before es el circulo que viaja en la punta de esa
   parte. Las tres se mueven con --avance, que pone js/main.js segun el scroll.

   Los tres estan puestos contra la caja de padding de la lista, cuyo borde
   izquierdo de 2px va de -2 a 0: el centro de la linea es -1. */
.nos-hitos {
  position: relative;
  max-width: 760px;
  margin: 44px auto 0;
  padding: 0 0 0 34px;
  list-style: none;
  border-left: 2px solid #DCE3D8;
}
/* La parte llena. El valor de reserva es 100% y no 0: si el JS no corre, la
   linea se ve entera en lugar de quedar vacia para siempre. */
.nos-hitos::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: var(--avance, 100%);
  background: #1B4332;
}
/* El circulo que viaja, centrado sobre la linea (-1 menos el radio de 8) y
   apoyado en la punta del relleno. El anillo del color de la pagina lo separa
   de la linea; el de afuera es un halo tenue.

   Arranca invisible y solo se ve mientras esa lista se esta recorriendo: si no,
   quedan dos circulos parados en las puntas de las dos listas. */
.nos-hitos::before {
  content: "";
  position: absolute;
  left: -9px;
  top: var(--avance, 100%);
  z-index: 2;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #1B4332;
  box-shadow: 0 0 0 5px #F4F5F2, 0 0 0 9px rgba(27, 67, 50, 0.14);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 240ms ease;
}
.nos-hitos--encurso::before { opacity: 1; }
/* Lo que todavia no paso se llena en un verde mas claro, para que se siga
   distinguiendo de lo que ya paso aun con la linea completa. */
.nos-hitos--plan::after { background: #8FB49C; }
.nos-hitos--plan::before {
  background: #8FB49C;
  box-shadow: 0 0 0 5px #F4F5F2, 0 0 0 9px rgba(143, 180, 156, 0.22);
}

.nos-hito { position: relative; padding-bottom: 34px; }
.nos-hito:last-child { padding-bottom: 0; }
/* El punto del hito arranca hueco y se rellena cuando el circulo lo pasa. */
.nos-hito::before {
  content: "";
  position: absolute;
  left: -42px;
  top: 3px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #DCE3D8;
  border-radius: 50%;
  background: #F4F5F2;
  box-shadow: 0 0 0 5px #F4F5F2;
  transition: background-color 280ms ease, border-color 280ms ease;
}
.nos-hito--activo::before { background: #1B4332; border-color: #1B4332; }
.nos-hito--plan.nos-hito--activo::before { background: #8FB49C; border-color: #8FB49C; }
.nos-hito__fecha {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A9088;
}
.nos-hito__titulo {
  margin: 8px 0 0;
  font-size: 21px;
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1B4332;
}
.nos-hito__texto {
  margin: 9px 0 0;
  font-size: 16px;
  line-height: 1.62;
  color: #5A625B;
}
/* Lo que todavia no paso se dibuja distinto a proposito: linea cortada y
   punto hueco. Si se ve igual que lo de arriba, se lee como hecho. */
.nos-hitos--plan { border-left-style: dashed; }
.nos-hito--plan .nos-hito__titulo { color: #4E6B58; }
.nos-linea__corte {
  max-width: 760px;
  margin: 52px auto 0;
  padding-left: 34px;
  font-size: 19px;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1B4332;
}
.nos-linea__aviso {
  max-width: 760px;
  margin: 8px auto 0;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.55;
  color: #8A9088;
}

/* ---------- Listas de items ---------- */
.nos-listas {
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 40px 0;
}
.nos-lista + .nos-lista { margin-top: 76px; }
.nos-lista__titulo {
  margin: 0;
  font-size: 32px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
  text-align: center;
}
.nos-lista__bajada {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 16.5px;
  line-height: 1.55;
  color: #5A625B;
  text-align: center;
}
.nos-lista__grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 38px;
}
.nos-lista__grilla--tres { grid-template-columns: repeat(3, 1fr); }
.nos-item {
  padding: 26px 24px;
  border: 1px solid #E0E5DC;
  border-radius: 18px;
  background: #FFFFFF;
}
.nos-item__titulo {
  margin: 0;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1B4332;
}
.nos-item__texto {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: #5A625B;
}

/* ---------- Preguntas frecuentes ---------- */
.nos-faq {
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 40px 0;
}
.nos-faq__lista {
  max-width: 820px;
  margin: 38px auto 0;
  border-top: 1px solid #E0E5DC;
}
.nos-faq__item { border-bottom: 1px solid #E0E5DC; }
.nos-faq__pregunta {
  position: relative;
  padding: 22px 44px 22px 0;
  font-size: 17.5px;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1B4332;
  cursor: pointer;
  list-style: none;
}
/* El triangulito que ponen los navegadores por su cuenta. Se saca en los dos
   dialectos: ::-webkit-details-marker para Safari, ::marker para el resto. */
.nos-faq__pregunta::-webkit-details-marker { display: none; }
.nos-faq__pregunta::marker { content: ""; }
.nos-faq__pregunta::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 28px;
  width: 9px;
  height: 9px;
  border: solid #1B4332;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.nos-faq__item[open] .nos-faq__pregunta::after { transform: rotate(-135deg); top: 32px; }
.nos-faq__respuesta {
  margin: 0;
  padding: 0 44px 24px 0;
  font-size: 16px;
  line-height: 1.65;
  color: #4E564F;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .nos-foto { padding: 44px 24px 0; }
  .nos-foto img { border-radius: 20px; }

  .nos-cita { padding: 44px 24px 0; }
  .nos-cita__caja { grid-template-columns: 1fr; gap: 24px; padding: 34px 30px; }
  .nos-cita__texto { font-size: 20px; }

  .nos-texto { padding: 70px 24px 0; }
  .nos-bloque { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .nos-bloque__titulo { font-size: 24px; }

  .nos-linea { padding: 70px 24px 0; }
  .nos-listas { padding: 70px 24px 0; }
  .nos-lista + .nos-lista { margin-top: 56px; }
  .nos-lista__titulo { font-size: 27px; }
  .nos-lista__grilla,
  .nos-lista__grilla--tres { grid-template-columns: repeat(2, 1fr); }

  .nos-faq { padding: 70px 24px 0; }
}

/* ---------- Telefono ---------- */
@media (max-width: 600px) {
  .nos-foto { padding: 34px 20px 0; }
  .nos-cita { padding: 34px 20px 0; }
  .nos-cita__caja { padding: 28px 22px; border-radius: 20px; }
  .nos-cita__retrato { width: 108px; height: 108px; }
  .nos-cita__texto { font-size: 18px; }

  .nos-texto { padding: 56px 20px 0; }
  .nos-bloque__titulo { font-size: 22px; }
  .nos-bloque__cuerpo p { font-size: 15.5px; }

  .nos-linea { padding: 56px 20px 0; }
  .nos-hitos { padding-left: 24px; }
  .nos-hito::before { left: -32px; }
  .nos-hito__titulo { font-size: 19px; }
  .nos-hito__texto { font-size: 15.5px; }
  .nos-linea__corte,
  .nos-linea__aviso { padding-left: 24px; }

  .nos-listas { padding: 56px 20px 0; }
  .nos-lista__titulo { font-size: 24px; }
  .nos-lista__grilla,
  .nos-lista__grilla--tres { grid-template-columns: 1fr; gap: 14px; }

  .nos-faq { padding: 56px 20px 0; }
  .nos-faq__pregunta { font-size: 16.5px; padding-right: 36px; }
  .nos-faq__respuesta { font-size: 15.5px; padding-right: 20px; }
}

/* Los hitos de la linea de tiempo entran con el scroll. El estado oculto lo
   pone js/main.js, no esta regla: sin JavaScript no hay .nos-hito--oculto y se
   ven todos, que es lo que tiene que pasar. */
.nos-hito {
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.25, .46, .45, .94);
}
.nos-hito--oculto { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  .nos-hito, .nos-hito::before, .nos-hitos::before { transition: none; }
}

/* ==========================================================================
   /contacto. Dos tarjetas y nada mas: la primera abre el mismo formulario que
   el resto del sitio, la segunda es el mail de prensa. Se genera con
   tools/contacto.js.
   ========================================================================== */

.ctc-grilla {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px 130px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
/* min-height y no un alto fijo: el boton va abajo de todo con margin-top:auto,
   asi que las dos tarjetas terminan con el boton a la misma altura aunque los
   textos midan distinto. */
.ctc-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 38px 36px 34px;
  border: 1px solid #E0E5DC;
  border-radius: 24px;
  background: #FFFFFF;
}
.ctc-card--verde { border-color: #1B4332; background: #1B4332; }
.ctc-card__titulo {
  margin: 0;
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
}
.ctc-card--verde .ctc-card__titulo { color: #FFFFFF; }
.ctc-card__texto {
  margin: 14px 0 0;
  max-width: 420px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #5A625B;
}
.ctc-card--verde .ctc-card__texto { color: rgba(255, 255, 255, 0.8); }
.ctc-card__mail {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ctc-card--verde .ctc-card__mail { color: #E3FDCB; }

/* El boton pegado abajo a la derecha, como en la referencia. */
.ctc-card__accion { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 32px; }
.ctc-card__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 26px;
  border: 1.5px solid #1B4332;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  color: #1B4332;
  text-decoration: none;
}
/* El relleno de .tc-btn-flecha es lima, que sobre blanco no contrasta: en la
   tarjeta clara entra el verde y el texto pasa a blanco. En la verde se queda
   el lima, que ahi si contrasta. */
.ctc-card__btn.tc-btn-flecha::before { background: #1B4332; }
.ctc-card__btn.tc-btn-flecha:hover,
.ctc-card__btn.tc-btn-flecha:focus-visible { color: #FFFFFF; }
.ctc-card--verde .ctc-card__btn {
  border-color: rgba(227, 253, 203, 0.5);
  color: #E3FDCB;
}
.ctc-card--verde .ctc-card__btn.tc-btn-flecha::before { background: #E3FDCB; }
.ctc-card--verde .ctc-card__btn.tc-btn-flecha:hover,
.ctc-card--verde .ctc-card__btn.tc-btn-flecha:focus-visible { color: #1B4332; }

/* El encabezado de /contacto va alineado a la izquierda, no centrado como el
   de las paginas de sistema: al lado de dos tarjetas, un titulo centrado
   queda flotando sin nada que lo sostenga. */
.ctc-tope { text-align: left; }
.ctc-tope .sol-tope__bajada { margin-left: 0; max-width: 480px; }

@media (max-width: 900px) {
  .ctc-grilla { padding: 40px 24px 100px; gap: 16px; }
  .ctc-card { min-height: 0; padding: 32px 28px 28px; }
  .ctc-card__titulo { font-size: 26px; }
}

@media (max-width: 600px) {
  .ctc-grilla { grid-template-columns: 1fr; padding: 32px 20px 84px; }
  .ctc-card { padding: 28px 22px 24px; border-radius: 20px; }
  .ctc-card__titulo { font-size: 23px; }
  .ctc-card__texto { font-size: 15.5px; }
  .ctc-card__accion { justify-content: stretch; padding-top: 24px; }
  .ctc-card__btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Blog: el indice (/blog, prefijo bl-) y la pagina de articulo (post-).
   Se generan con tools/blog.js. Arranca en escritorio; tablet y telefono al
   final del bloque.
   ========================================================================== */

/* La portada es una composicion partida: foto de un lado, panel verde con el
   logo y el titulo del otro. Cuando la caja que la muestra es mas angosta que
   16:9 hay que recortar, y lo que tiene que sobrevivir es la foto, no la
   costura del medio. El lado sale de tools/blog-datos.js. */
.portada--panel-der > img { object-position: 0% 50%; }
.portada--panel-izq > img { object-position: 100% 50%; }

.bl-pastilla {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 9999px;
  background: #E9F3E2;
  color: #1B4332;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Destacado ---------- */
/* Foto a la izquierda y texto a la derecha, con la foto sangrando hasta el
   borde de la tarjeta: el padding va solo del lado del texto. */
.bl-destacado {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px 0;
}
.bl-destacado__card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  border-radius: 26px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E0E5DC;
  text-decoration: none;
  transition: border-color 220ms ease;
}
.bl-destacado__card:hover { border-color: #1B4332; }
.bl-destacado__foto {
  position: relative;
  inset: auto;
  /* 16:9 y no 4:3 porque la portada es una composicion de ese formato: a 4:3
     se le comia casi la mitad del panel del logo. */
  aspect-ratio: 16 / 9;
  border: 0;
}
.bl-destacado__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 44px 46px;
}
.bl-destacado__titulo {
  margin: 16px 0 0;
  font-size: 33px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
}
.bl-destacado__bajada {
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: #5A625B;
}
.bl-destacado__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  margin-top: 24px;
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid #1B4332;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  color: #1B4332;
}
.bl-destacado__btn.tc-btn-flecha::before { background: #1B4332; }
.bl-destacado__card:hover .bl-destacado__btn.tc-btn-flecha::before { transform: translateX(0); }
.bl-destacado__card:hover .bl-destacado__btn.tc-btn-flecha { color: #FFFFFF; }
.bl-destacado__card:hover .bl-destacado__btn .tc-flechas svg { transform: translateX(17px); }

/* ---------- Pastillas de categoria ---------- */
/* Filtran del lado del cliente: las tarjetas estan todas en el HTML servido,
   asi que un crawler las ve sin ejecutar nada. */
.bl-lista {
  max-width: 1240px;
  margin: 0 auto;
  padding: 62px 40px 0;
}
.bl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 30px;
}
.bl-pill {
  padding: 11px 24px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #5A625B;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.bl-pill:hover { background: #E9EDE6; color: #1B4332; }
.bl-pill--activa, .bl-pill--activa:hover { background: #1B4332; color: #FFFFFF; }

/* ---------- Grilla de tarjetas ---------- */
/* Las tarjetas son las .nota de la home, tal cual: no hay estilo propio del
   blog. Lo unico que se ajusta es el aire de arriba, porque aca la grilla va
   pegada a las pastillas de categoria y no a un titulo de seccion. */
.bl-lista .nota-grilla { margin-top: 0; }
.bl-card__meta {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: #8A9088;
}
.bl-vacio { margin: 30px 0 0; font-size: 16px; color: #5A625B; }

.bl-relacionados {
  max-width: 1240px;
  margin: 0 auto;
  padding: 88px 40px 0;
}
.bl-relacionados__titulo {
  margin: 0 0 30px;
  font-size: 28px;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #1B4332;
}

/* ==========================================================================
   Pagina de articulo
   ========================================================================== */

/* Los tres bloques del articulo comparten ancho para que el borde izquierdo
   del titulo, de la portada y del texto quede en la misma linea. 900 = 726 de
   columna de lectura + 50 de aire + 124 del riel de compartir. El riel mide lo
   que mide el rotulo "COMPARTIR", que es mas ancho que un boton. */
/* Los tres bloques del articulo comparten ancho para que el borde izquierdo
   del titulo, de la portada y del texto quede en la misma linea.
   1100 = 720 de columna de lectura + 60 de aire + 320 de la tarjeta de
   compartir, que necesita ese ancho para tener los cinco iconos en una fila. */
.post-tope {
  max-width: 1100px;
  margin: 0 auto;
  padding: 130px 40px 0;
}
.post-titulo {
  /* El bloque mide 1100 pero el titulo se corta antes: a 1100 una linea de
     44px entra en un solo renglon larguisimo y se pierde el salto. */
  max-width: 820px;
  margin: 26px 0 0;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #1B4332;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 22px 0 0;
  font-size: 14px;
  color: #8A9088;
}

.post-portada {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 40px;
}
.post-portada__img {
  position: relative;
  inset: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 22px;
}

/* Texto a la izquierda y tarjeta de compartir a la derecha. El texto va
   primero en el HTML: es lo que tienen que leer un lector de pantalla y un
   crawler antes que los botones de compartir. */
.post-cuerpo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 52px 40px 0;
  display: grid;
  grid-template-columns: minmax(0, 720px) 320px;
  gap: 60px;
  align-items: start;
}
/* 720px deja una linea de unos 78 caracteres en este cuerpo, que es donde el
   ojo todavia no pierde el renglon. */
.post-texto { max-width: 720px; min-width: 0; }

/* ---------- Compartir ---------- */
/* La tarjeta va al costado del texto y sigue el scroll. El top de 100px la
   despeja del navbar fijo, que mide 68. */
.post-compartir {
  position: sticky;
  top: 100px;
  box-sizing: border-box;
  padding: 26px 24px;
  border-radius: 20px;
  background: #EDEFEA;
}
.post-compartir__rotulo {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1B4332;
}
/* Los cinco iconos en una sola fila. Es lo que fija el ancho de la tarjeta:
   5 x 44 + 4 x 12 = 268, mas los 24 de padding de cada lado, da 316. */
.post-compartir__botones { display: flex; gap: 12px; }
.post-compartir__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #CFD8CB;
  border-radius: 50%;
  background: transparent;
  color: #1B4332;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.post-compartir__btn svg { width: 19px; height: 19px; display: block; }
.post-compartir__btn:hover { background: #1B4332; border-color: #1B4332; color: #FFFFFF; }
.post-compartir__btn:focus-visible { outline: 2px solid #1B4332; outline-offset: 3px; }
.post-compartir__aviso {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #1B4332;
  white-space: nowrap;
}

/* El bloque de respuesta: lo primero, mas grande que el cuerpo y separado por
   una barra al costado. Es el pedazo pensado para que se lo lleven entero. */
.post-respuesta {
  margin: 0 0 14px;
  padding-left: 22px;
  border-left: 3px solid #1B4332;
  font-size: 19.5px;
  line-height: 1.6;
  color: #1B4332;
}
.post-h2 {
  margin: 44px 0 16px;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #1B4332;
}
.post-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.72;
  color: #3F473F;
}
.post-p strong { color: #1B4332; }
.post-lista { margin: 0 0 18px; padding: 0; list-style: none; }
.post-lista li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #3F473F;
}
.post-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1B4332;
}

.post-tabla { margin: 0 0 22px; overflow-x: auto; }
.post-tabla table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.post-tabla th {
  padding: 12px 14px;
  border-bottom: 2px solid #1B4332;
  text-align: left;
  font-weight: 700;
  color: #1B4332;
  white-space: nowrap;
}
.post-tabla td {
  padding: 13px 14px;
  border-bottom: 1px solid #E4E7E1;
  color: #3F473F;
  vertical-align: top;
}

/* El "que mirar". Va sobre lima porque es el bloque mas citable del articulo y
   conviene que se distinga del cuerpo de un vistazo. */
.post-mirar {
  margin: 40px 0 0;
  padding: 30px 32px;
  border-radius: 20px;
  background: #E9F3E2;
}
.post-mirar__titulo {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1B4332;
}
.post-mirar__lista { margin: 14px 0 0; padding: 0; list-style: none; }
.post-mirar__lista li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-bottom: 1px solid rgba(27, 67, 50, 0.12);
  font-size: 16px;
  line-height: 1.55;
  color: #2C3A2F;
}
.post-mirar__lista li:last-child { border-bottom: 0; }
.post-mirar__lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 6px;
  height: 10px;
  border: solid #1B4332;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.post-herramienta {
  margin: 34px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: #5A625B;
}
.post-herramienta a { color: #1B4332; font-weight: 600; }

.post-firma {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 44px 0 0;
  padding-top: 30px;
  border-top: 1px solid #E0E5DC;
}
.post-firma__foto {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 9px;
}
.post-firma__nombre { margin: 0; font-size: 16px; font-weight: 700; color: #1B4332; }
.post-firma__rol { margin: 3px 0 0; font-size: 14.5px; color: #5A625B; }
.post-firma__link { display: inline-block; margin-top: 5px; font-size: 14px; font-weight: 600; color: #1B4332; }

/* Corte propio del articulo, antes que el del resto del sitio: la tarjeta de
   compartir necesita 320px al costado y abajo de 1180 de ventana la columna de
   lectura se empezaba a aplastar. Ahi la tarjeta pasa arriba del texto. */
@media (max-width: 1180px) {
  .post-cuerpo { grid-template-columns: minmax(0, 720px); gap: 30px; }
  .post-compartir {
    order: -1;
    position: static;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 720px;
    padding: 12px 18px;
    border-radius: 16px;
  }
  .post-compartir__rotulo { margin: 0; flex: 0 0 auto; }
  .post-compartir__aviso { margin: 0; white-space: nowrap; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .bl-destacado { padding: 40px 24px 0; }
  /* La foto arriba y el texto abajo: en una columna, entrar por la imagen
     ubica mas rapido que entrar por el titulo. */
  .bl-destacado__card { grid-template-columns: 1fr; }
  .bl-destacado__foto { aspect-ratio: 16 / 9; }
  .bl-destacado__cuerpo { padding: 30px 28px 32px; }
  .bl-destacado__titulo { font-size: 27px; }

  .bl-lista { padding: 48px 24px 0; }
  .bl-relacionados { padding: 66px 24px 0; }

  .post-tope { padding: 110px 24px 0; }
  .post-titulo { font-size: clamp(28px, 4.6vw, 38px); }
  .post-portada { padding: 0 24px; }
  .post-cuerpo { padding: 40px 24px 0; }
  .post-respuesta { font-size: 18px; }
}

/* ---------- Telefono ---------- */
@media (max-width: 600px) {
  .bl-destacado { padding: 30px 20px 0; }
  .bl-destacado__card { border-radius: 20px; }
  .bl-destacado__cuerpo { padding: 24px 22px 26px; }
  .bl-destacado__titulo { font-size: 23px; }
  .bl-destacado__bajada { font-size: 15.5px; }
  .bl-destacado__btn { width: 100%; justify-content: center; }

  .bl-lista { padding: 38px 20px 0; }
  /* Las pastillas en una fila que se arrastra, en vez de amontonarse en
     cuatro renglones. El scrollbar se esconde: la fila se ve cortada al
     borde, que ya avisa que sigue. */
  .bl-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 0 20px 24px;
  }
  .bl-pills::-webkit-scrollbar { display: none; }
  .bl-pill { flex: 0 0 auto; padding: 10px 18px; font-size: 14px; }

  .bl-relacionados { padding: 54px 20px 0; }
  .bl-relacionados__titulo { font-size: 24px; }

  .post-tope { padding: 96px 20px 0; }
  .post-titulo { font-size: 27px; }
  .post-portada { padding: 0 20px; margin-top: 28px; }
  .post-portada__img { border-radius: 16px; }
  .post-cuerpo { padding: 32px 20px 0; }
  /* El rotulo se va: con 350px de ancho, entre el texto y cinco botones gana
     el que se puede tocar. Los aria-label siguen diciendo que hace cada uno. */
  .post-compartir { gap: 0; padding: 10px 12px; justify-content: space-between; }
  .post-compartir__rotulo { display: none; }
  .post-compartir__botones { gap: 8px; }
  .post-compartir__btn { width: 42px; height: 42px; }
  .post-respuesta { font-size: 17px; padding-left: 16px; }
  .post-h2 { font-size: 22px; margin-top: 36px; }
  .post-p { font-size: 16.5px; }
  .post-mirar { padding: 24px 22px; }
  .post-mirar__titulo { font-size: 19px; }
}