/* ============================================================
   TIPOGRAFÍAS AUTOALOJADAS — Newsreader e Instrument Sans
   Licencia SIL Open Font License. Antes venían de Google Fonts;
   se bajaron a assets/fuentes/ para no mandarle la IP de cada
   visita a Google (la página dice "no guardamos nada") y para
   que cargue mejor con mala señal. Solo los subconjuntos latin y
   latin-ext (el resto de idiomas no hace falta aquí).
   ============================================================ */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fuentes/instrument-sans-normal-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fuentes/instrument-sans-normal-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fuentes/instrument-sans-normal-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fuentes/instrument-sans-normal-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fuentes/instrument-sans-normal-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fuentes/instrument-sans-normal-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fuentes/newsreader-italic-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fuentes/newsreader-italic-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fuentes/newsreader-italic-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fuentes/newsreader-italic-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fuentes/newsreader-normal-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fuentes/newsreader-normal-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fuentes/newsreader-normal-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fuentes/newsreader-normal-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;
}

/* ============================================================
   SISTEMA DE DISEÑO — "tierra de noche"
   Inspiración: páginas de producto oscuras y cinematográficas (un solo
   objeto iluminado, tipografía grande y fina, mucho aire). Llevado al
   rancho: fondo de tierra de noche, luz ámbar de lámpara, nada de neón.
   Nada de #FFF ni #000. Contrastes medidos para AA sobre el fondo.
   ============================================================ */
:root {
  --noche: #151310;          /* fondo */
  --noche-2: #1C1915;        /* fondo alterno */
  --hueso: #EDE6DA;          /* texto */
  --hueso-suave: #C9C1B3;    /* texto secundario (≈11:1) */
  --gris: #B3AC9F;           /* notas (≈8.5:1; más claro para leer al sol) */
  --linea: rgba(var(--hueso-rgb), .12);
  --ambar: #D08A4E;          /* acento: luz de lámpara — escaso */
  --ambar-claro: #E7A56B;
  --ambar-claro-rgb: 231, 165, 107; /* el mismo ámbar claro, para rgba() */
  --hueso-rgb: 237, 230, 218;        /* el mismo hueso, para rgba() */
  --boton: #EDE6DA;          /* botón principal: hueso sobre noche */
  --boton-texto: #151310;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --aire: clamp(96px, 13vw, 190px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--noche); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--noche); color: var(--hueso);
  font-family: var(--sans); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.65;
  overflow-x: hidden;
}
/* Grano finísimo encima de todo: le quita lo "plano de pantalla". */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ambar-claro); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ambar); color: var(--noche); }

.contenedor { width: min(1160px, 90%); margin: 0 auto; }
.angosto { max-width: 780px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--hueso); color: var(--noche); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(3rem, 1.4rem + 7vw, 7.4rem); }
h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.2rem); max-width: 18ch; margin-bottom: clamp(40px, 6vw, 80px); }
h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); margin-bottom: 16px; }
h1 em, h2 em { font-style: italic; color: var(--ambar-claro); }
p { margin: 0 0 16px; }
strong { font-weight: 600; color: var(--hueso); }
.rotulo { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-bottom: 22px; }
.nota { color: var(--gris); font-size: 1rem; }
.opcional { color: var(--gris); font-weight: 400; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
  background: var(--boton); color: var(--boton-texto); font: 500 1rem var(--sans); text-decoration: none; cursor: pointer;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.btn:hover { background: #FFF8EC; }
.btn:active { transform: translateY(1px); }
.btn--chico { min-height: 42px; padding: 0 20px; font-size: .92rem; }
.liga-flecha { text-decoration: none; color: var(--hueso-suave); padding: 12px 4px; border-bottom: 1px solid var(--linea); transition: color .2s, border-color .2s; }
.liga-flecha:hover { color: var(--hueso); border-color: var(--hueso); }
.liga-flecha { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }

/* ---------- Navegación ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.con-fondo { background: rgba(21, 19, 16, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--linea); }
.nav__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 1.3rem; }
.marca__ojo { width: 28px; height: 28px; color: var(--ambar-claro); }
.nav__ligas { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav__ligas a { text-decoration: none; color: var(--hueso-suave); font-size: .93rem; transition: color .2s; }
.nav__ligas a:hover { color: var(--hueso); }
@media (max-width: 860px) { .nav__ligas { display: none; } }

/* ---------- Portada: un solo objeto iluminado ---------- */
.portada { position: relative; padding: clamp(140px, 18vw, 210px) 0 0; text-align: center; overflow: hidden; }
.portada::before { /* la luz de lámpara detrás del teléfono (quieta) */
  content: ''; position: absolute; left: 50%; bottom: -8%; width: min(1100px, 150vw); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(208, 138, 78, .30) 0%, rgba(208, 138, 78, .10) 32%, transparent 62%);
  pointer-events: none;
}
.portada__centro { position: relative; display: flex; flex-direction: column; align-items: center; }
.portada h1 { max-width: 15ch; }
.portada__texto { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--hueso-suave); max-width: 40ch; margin: 30px auto 38px; }
.portada__botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.telefono--portada { position: relative; width: min(340px, 72vw); margin: clamp(64px, 9vw, 110px) auto 0; }
.telefono--portada img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
/* el teléfono "sale" del suelo: se funde con la noche por abajo */
.telefono--portada::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: 0; height: 42%; background: linear-gradient(to bottom, transparent, var(--noche) 88%); }

/* ---------- Teléfono ---------- */
.telefono img {
  border-radius: 38px; border: 9px solid #2A2621; background: #2A2621;
  box-shadow: 0 0 0 1px rgba(var(--hueso-rgb), .08), 0 50px 120px -40px rgba(208, 138, 78, .35), 0 30px 60px -30px rgba(0, 0, 0, .8);
}

/* ---------- Qué hace: el teléfono se queda y cambia de pantalla ---------- */
.historia { padding: var(--aire) 0 calc(var(--aire) * .6); }
.historia__rejilla { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: clamp(40px, 8vw, 130px); }
/* Sin JavaScript no hay quién cambie de pantalla el teléfono fijo: cada
   paso se queda con su propio texto a plena vista y su propia foto, igual
   que en celular. La atenuación y el teléfono fijo son cosa de .js. */
.paso { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; max-width: 30rem; padding: 40px 0; border-top: 1px solid var(--linea); }
.js .paso { opacity: .65; transition: opacity .5s; } /* .65 mide ≥4.5:1 sobre --noche para el texto en --hueso-suave */
.js .paso.activo { opacity: 1; }
.paso__num { font-family: var(--serif); font-style: italic; color: var(--ambar-claro); font-size: 1.1rem; margin-bottom: 18px; }
.paso p { color: var(--hueso-suave); }
/* Con .js en escritorio la foto de cada paso se oculta SOLO visualmente
   (patrón de .oculto-visual): sigue en el DOM con su alt para quien usa
   lector de pantalla, porque el teléfono fijo de al lado lleva aria-hidden. */
.js .paso__foto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.historia__fijo { display: none; }
.js .historia__fijo { display: block; position: relative; }
.telefono--pila { position: sticky; top: calc(50vh - 330px); display: grid; }
.telefono--pila img { grid-area: 1 / 1; opacity: 0; transform: scale(.985); transition: opacity .6s ease, transform .6s ease; }
.telefono--pila img.activa { opacity: 1; transform: none; }
.historia__nota { margin-top: 26px; }
@media (max-width: 860px) {
  .historia__rejilla { grid-template-columns: 1fr; }
  .historia__fijo, .js .historia__fijo { display: none; }
  .paso, .js .paso { min-height: 0; opacity: 1; padding: 48px 0; }
  .paso__foto, .js .paso__foto {
    position: static; width: min(280px, 78vw); height: auto; overflow: visible;
    clip: auto; white-space: normal; margin: 34px auto 0;
  }
}
.mas { list-style: none; padding: 0; margin: clamp(40px, 6vw, 80px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); border-top: 1px solid var(--linea); }
.mas li { padding: 24px 28px 24px 0; border-bottom: 1px solid var(--linea); color: var(--hueso-suave); }

/* ---------- Secciones ---------- */
.seccion { padding: var(--aire) 0; border-top: 1px solid var(--linea); }
.seccion--alterna { background: var(--noche-2); }

/* Cómo trabajamos: cuatro pasos numerados, sin tarjetas */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--linea); }
.pasos li { display: flex; flex-direction: column; gap: 18px; padding: 34px 28px 10px 0; }
.pasos__num { font-family: var(--serif); font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: 1; color: var(--ambar-claro); }
.pasos h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); }
.pasos p { color: var(--hueso-suave); }

/* Precio */
.precio { display: grid; grid-template-columns: 1fr minmax(280px, 440px); gap: clamp(40px, 8vw, 120px); align-items: start; }
.precio p { color: var(--hueso-suave); max-width: 52ch; }
.tabla-precio { width: 100%; border-collapse: collapse; }
.tabla-precio th { text-align: left; font: 500 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); padding: 0 0 14px; border-bottom: 1px solid var(--hueso-suave); }
.tabla-precio th:last-child, .tabla-precio td:last-child { text-align: right; }
.tabla-precio td { padding: 20px 0; border-bottom: 1px solid var(--linea); color: var(--hueso-suave); }
.tabla-precio td:last-child { font-family: var(--serif); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); color: var(--hueso); }
@media (max-width: 760px) { .precio { grid-template-columns: 1fr; } }

/* Preguntas */
details { border-top: 1px solid var(--linea); }
details:last-of-type { border-bottom: 1px solid var(--linea); }
summary { cursor: pointer; list-style: none; padding: 26px 48px 26px 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); position: relative; transition: color .2s; }
summary:hover { color: var(--ambar-claro); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300; font-size: 1.8rem; color: var(--ambar-claro); transition: transform .3s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--hueso-suave); max-width: 60ch; padding-bottom: 18px; }

/* Contacto */
.contacto { display: grid; grid-template-columns: 1fr minmax(300px, 480px); gap: clamp(40px, 8vw, 120px); align-items: start; }
.contacto > div p { color: var(--hueso-suave); max-width: 40ch; }
@media (max-width: 760px) { .contacto { grid-template-columns: 1fr; } }
.formulario { display: flex; flex-direction: column; }
.formulario label { font-size: 1rem; color: var(--hueso-suave); margin: 22px 0 8px; }
.formulario label:first-child { margin-top: 0; }
.formulario input, .formulario select, .formulario textarea {
  font: inherit; color: var(--hueso); background: transparent;
  border: 0; border-bottom: 1px solid rgba(var(--hueso-rgb), .45); border-radius: 0; padding: 10px 2px; min-height: 48px; width: 100%;
  transition: border-color .2s;
}
.formulario select { background: var(--noche); }
.formulario select option { background: var(--noche); color: var(--hueso); }
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: none; border-bottom: 2px solid var(--ambar-claro);
  box-shadow: 0 2px 0 0 var(--ambar-claro), 0 0 0 3px rgba(var(--ambar-claro-rgb), .18);
}
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible { outline: none; }
/* Campo con error: coral (el mismo del mensaje). Con foco conserva el halo, para que se note dónde se escribe. */
.formulario input[aria-invalid="true"], .formulario select[aria-invalid="true"], .formulario textarea[aria-invalid="true"] { border-bottom: 2px solid #F2A48F; }
.formulario input[aria-invalid="true"]:focus, .formulario select[aria-invalid="true"]:focus, .formulario textarea[aria-invalid="true"]:focus { border-bottom: 2px solid #F2A48F; box-shadow: 0 2px 0 0 #F2A48F, 0 0 0 3px rgba(242, 164, 143, .25); }
.formulario .btn { margin-top: 32px; align-self: flex-start; }
.formulario__error { color: #F2A48F; min-height: 1.2em; margin: 18px 0 0; }
.formulario__respaldo:not(:empty) { margin: 14px 0 0; }
.formulario__respaldo a { color: var(--ambar-claro); }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 44px 0 120px; color: var(--gris); font-size: .9rem; }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; }
.pie p { margin: 0; }

/* Página 404: el CSP de esa página bloquea cualquier style="" en línea,
   así que este alto y relleno viven en una clase, no atributo. */
.pagina-404 { min-height: 100vh; padding-bottom: 120px; }
.liga-regreso { display: inline-block; padding: 12px 0; }


/* Aparición suave. El contenido NUNCA depende de esto para verse:
   sin JavaScript no se oculta nada, y el script destapa todo a los 2.5 s
   pase lo que pase. */
.js .aparece { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.js .aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .aparece, .telefono--pila img, .paso { transition: none; }
  .js .aparece { opacity: 1; transform: none; }
}

/* ============================================================
   MOVIMIENTO — todo bajo .js y todo se apaga con "reducir movimiento".
   Sin JavaScript la página se ve completa y quieta.
   ============================================================ */
/* Barra de avance de lectura, arriba */
.avance { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 70; background: var(--ambar-claro); transform: scaleX(0); transform-origin: 0 50%; }

/* El título entra palabra por palabra, subiendo desde una máscara */
.pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.pal__in { display: inline-block; }
.js .pal__in { transform: translateY(115%); animation: sube 1.1s cubic-bezier(.2, .8, .2, 1) forwards; }
.js .pal--1 { animation-delay: .10s; } .js .pal--2 { animation-delay: .18s; } .js .pal--3 { animation-delay: .26s; }
.js .pal--4 { animation-delay: .42s; } .js .pal--5 { animation-delay: .50s; } .js .pal--6 { animation-delay: .58s; }
@keyframes sube { to { transform: none; } }

/* Lo demás de la portada aparece después del título */
.js .portada .rotulo, .js .portada__texto, .js .portada__botones { opacity: 0; animation: asoma 1s ease forwards; }
.js .portada__texto { animation-delay: .9s; }
.js .portada__botones { animation-delay: 1.1s; }
@keyframes asoma { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* El teléfono sube desde el suelo; luego JS lo inclina con el ratón y lo mueve con el scroll */
.telefono--portada { perspective: 1400px; }
.telefono--portada img { will-change: transform; transition: transform .25s ease-out; }
.js .telefono--portada { opacity: 0; animation: emerge 1.6s cubic-bezier(.2, .8, .2, 1) 1s forwards; }
@keyframes emerge { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }

/* La luz de lámpara respira */
.portada::before { animation: respira 7s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* El teléfono fijo: la pantalla nueva entra deslizándose */
.telefono--pila img { transform: translateY(26px) scale(.985); }
.telefono--pila img.activa { transform: none; }

/* Botones con peso */
.btn:hover { transform: translateY(-2px); }
.liga-flecha span { display: inline-block; transition: transform .3s; }
.liga-flecha:hover span { transform: translateY(4px); }

/* Las cifras de precio entran una tras otra */
.js .tabla-precio tbody tr { opacity: 0; transform: translateX(24px); transition: opacity .7s ease, transform .7s ease; }
.js .tabla-precio.visible tbody tr { opacity: 1; transform: none; }
.js .tabla-precio.visible tbody tr:nth-child(2) { transition-delay: .12s; }
.js .tabla-precio.visible tbody tr:nth-child(3) { transition-delay: .24s; }
.js .tabla-precio.visible tbody tr:nth-child(4) { transition-delay: .36s; }

/* Los cuatro pasos de "cómo trabajamos" entran en cascada */
.js .pasos li:nth-child(2) { transition-delay: .12s; } .js .pasos li:nth-child(3) { transition-delay: .24s; } .js .pasos li:nth-child(4) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .js .pal__in, .js .portada .rotulo, .js .portada__texto, .js .portada__botones, .js .telefono--portada { animation: none; opacity: 1; transform: none; }
  .portada::before { animation: none; }
  .js .tabla-precio tbody tr { opacity: 1; transform: none; transition: none; }
  .telefono--portada img { transition: none; }
}

/* Barra de arriba en celular: nada se parte en dos líneas */
.marca, .btn--chico { white-space: nowrap; }
@media (max-width: 480px) {
  .marca { font-size: 1.12rem; gap: 8px; }
  .marca__ojo { width: 24px; height: 24px; }
  .btn--chico { padding: 0 16px; font-size: .88rem; }
}


/* ============================================================
   EL TELÉFONO SE PUEDE PROBAR
   En computadora la app de verdad (con el rancho ficticio) se carga DENTRO
   del teléfono al tocar el botón. En celular el botón abre la demo completa.
   ============================================================ */
.pantalla { position: relative; border-radius: 38px 38px 0 0; overflow: hidden; }
.probar {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 3; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--ambar-claro); color: var(--noche); font: 600 1rem var(--sans); text-decoration: none;
  box-shadow: 0 0 0 8px rgba(var(--ambar-claro-rgb), .18), 0 20px 50px -10px rgba(0, 0, 0, .7);
  transition: transform .25s, box-shadow .25s;
}
.probar:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 0 12px rgba(var(--ambar-claro-rgb), .22), 0 20px 50px -10px rgba(0, 0, 0, .7); }
.probar__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--noche); }
.probar__nota { position: absolute; left: -30%; right: -30%; top: 56%; z-index: 3; text-align: center; font-size: .9rem; color: var(--hueso); text-shadow: 0 1px 12px rgba(0, 0, 0, .9); padding: 0 10px; }
.telefono--portada .pantalla::after { content: ''; position: absolute; inset: 0; background: rgba(21, 19, 16, .38); z-index: 2; transition: opacity .4s; }

/* Ya viva: teléfono completo, sin velo, sin inclinarse */
.telefono--portada.viva { margin-bottom: clamp(60px, 8vw, 110px); animation: none; opacity: 1; }
.telefono--portada.viva::after, .telefono--portada.viva .pantalla::after, .telefono--portada.viva .probar, .telefono--portada.viva .probar__nota { display: none; }
.telefono--portada.viva .pantalla { border-radius: 38px; border: 9px solid #2A2621; background: #F6F7F9; aspect-ratio: 390 / 844; box-shadow: 0 0 0 1px rgba(var(--hueso-rgb), .08), 0 50px 120px -40px rgba(208, 138, 78, .45), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.pantalla iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; background: #F6F7F9; }
.cerrar-demo { display: block; margin: 18px auto 0; background: none; border: 0; border-bottom: 1px solid var(--linea); color: var(--hueso-suave); font: inherit; font-size: .92rem; padding: 8px 4px; cursor: pointer; }
.cerrar-demo:hover { color: var(--hueso); border-color: var(--hueso); }
@media (prefers-reduced-motion: reduce) { .probar__punto { animation: none; } }

/* ---------- Cómo se paga ---------- */
.pago { padding: 34px 0 10px; }
.pago__num { display: block; font-family: var(--serif); font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: 1; color: var(--ambar-claro); margin-bottom: 18px; }
.pago p, .pago li { color: var(--hueso-suave); }
.pago ul { list-style: none; padding: 0; margin: 20px 0 0; }
.pago li { padding: 14px 0; border-top: 1px solid var(--linea); }
.pago__cierre { margin-top: clamp(36px, 5vw, 60px); max-width: 62ch; color: var(--hueso-suave); }
.pago__cierre a, .pie a, .legal a { color: var(--ambar-claro); text-underline-offset: 3px; }

/* ---------- Pie legal y página de privacidad ---------- */
.pie__legal { margin-top: 22px; max-width: 95ch; font-size: .92rem; line-height: 1.6; color: var(--gris); }
.legal { padding: clamp(130px, 16vw, 190px) 0 var(--aire); }
.legal h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); margin-bottom: 14px; }
.legal h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin: 54px 0 14px; max-width: none; }
.legal p, .legal li { color: var(--hueso-suave); max-width: 70ch; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }

/* El teléfono vivo nunca es más alto que la ventana */
.telefono--portada.viva { width: min(340px, 72vw, calc((100vh - 190px) * .462)); }


/* ============================================================
   AJUSTE AL ALTO DE LA VENTANA (18/09)
   Muchas laptops con Windows escalan al 150%: la ventana útil mide ~550 px
   de alto. Todo lo que se queda fijo debe caber ahí COMPLETO.
   ============================================================ */
h1 { font-size: clamp(3rem, min(1.4rem + 7vw, 14vh + 1.2rem), 7.4rem); }
.portada { padding-top: clamp(110px, min(18vw, 22vh), 210px); }

/* El teléfono fijo de "Qué hace": cabe entero debajo de la barra, centrado */
.historia__fijo { display: flex; justify-content: center; align-items: flex-start; }
.telefono--pila {
  top: 92px;
  width: min(100%, calc((100vh - 124px) * .462));   /* 390/844 = .462 */
}
.telefono--pila img { border-radius: clamp(20px, 3.4vh, 38px); border-width: clamp(5px, .9vh, 9px); }
.paso { min-height: max(78vh, 420px); }

/* La demo viva, en computadora, es una VENTANA ancha a tamaño real
   (la app se adapta sola al ancho), no un teléfono chiquito. */
.telefono--portada.viva { width: min(1120px, 94vw); perspective: none; }
.telefono--portada.viva .pantalla {
  aspect-ratio: auto; height: clamp(420px, calc(100vh - 150px), 760px);
  border-radius: 14px; border: 1px solid rgba(var(--hueso-rgb), .18); background: #F6F7F9;
  display: flex; flex-direction: column;
}
.telefono--portada.viva .pantalla::before {   /* la barrita de la ventana */
  content: ''; flex: none; height: 34px; background: #2A2621;
  background-image: radial-gradient(circle at 18px 17px, #6B665D 5px, transparent 5.5px), radial-gradient(circle at 36px 17px, #6B665D 5px, transparent 5.5px), radial-gradient(circle at 54px 17px, #6B665D 5px, transparent 5.5px);
}
.telefono--portada.viva .pantalla iframe { position: static; flex: 1; width: 100%; height: auto; transform: none; }


/* ============================================================
   ARREGLOS DEL USUARIO-REAL (18/09): tía en laptop 1280x553 y ganadero en celular
   ============================================================ */
/* 1. El título ya no entra por una máscara (a medio camino se veían pedazos de
      letra flotando): cada palabra sube un poco y aparece. */
.pal { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
.js .pal__in { transform: translateY(.3em); opacity: 0; animation: palabra .7s ease forwards; }
@keyframes palabra { to { opacity: 1; transform: none; } }
.js .pal--1 { animation-delay: .05s; } .js .pal--2 { animation-delay: .12s; } .js .pal--3 { animation-delay: .19s; }
.js .pal--4 { animation-delay: .30s; } .js .pal--5 { animation-delay: .37s; } .js .pal--6 { animation-delay: .44s; }
.js .portada__texto { animation-delay: .55s; } .js .portada__botones { animation-delay: .7s; }
.js .telefono--portada { animation-delay: .6s; }

/* 2. En ventanas bajas la primera pantalla debe traer el botón */
@media (min-width: 861px) and (max-height: 700px) {
  :root { --aire: clamp(70px, 14vh, 120px); }
  h1 { font-size: clamp(2.6rem, 11.5vh, 5rem); }
  .portada { padding-top: 96px; }
  .portada .rotulo { margin-bottom: 12px; }
  .portada__texto { margin: 16px auto 20px; font-size: 1.02rem; max-width: 56ch; }
  .portada h1 { max-width: none; }
  .telefono--portada { margin-top: 56px; }
  h2 { margin-bottom: 32px; }
}

/* 3. La nota del teléfono: dentro del teléfono, con su fondo, sin salirse */
.probar__nota {
  left: 7%; right: 7%; top: calc(46% + 42px); padding: 9px 12px; border-radius: 12px;
  background: rgba(21, 19, 16, .86); font-size: .84rem; line-height: 1.35; text-shadow: none;
}
@media (max-width: 480px) { .probar { padding: 0 18px; font-size: .95rem; } }

/* 4. La ventana de la demo: barra de verdad, con el aviso y el botón de cerrar */
.telefono--portada.viva .pantalla { height: clamp(400px, calc(100vh - 120px), 760px); }
.telefono--portada.viva .pantalla::before { content: none; }
.ventana-barra { flex: none; display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 6px 0 14px; background: #2A2621; color: var(--hueso-suave); font-size: .82rem; }
.ventana-puntos { flex: none; width: 46px; height: 10px; background-image: radial-gradient(circle at 5px 5px, #6B665D 5px, transparent 5.5px), radial-gradient(circle at 23px 5px, #6B665D 5px, transparent 5.5px), radial-gradient(circle at 41px 5px, #6B665D 5px, transparent 5.5px); }
.ventana-titulo { flex: 1; text-align: center; color: var(--ambar-claro); }
.ventana-cerrar { flex: none; background: none; border: 0; color: var(--hueso); font: 500 .88rem var(--sans); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.ventana-cerrar:hover { background: rgba(var(--hueso-rgb), .12); }

/* 5. Celular: menú en una segunda fila que se desliza, y blancos de ≥44 px */
@media (max-width: 860px) {
  .nav { background: rgba(21, 19, 16, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .nav__fila { flex-wrap: wrap; row-gap: 0; min-height: 64px; }
  .nav nav { order: 3; width: 100%; }
  .nav__ligas { display: flex; gap: 4px; overflow-x: auto; margin: 0 -5vw; padding: 0 5vw 6px; scrollbar-width: none; }
  .nav__ligas::-webkit-scrollbar { display: none; }
  .nav__ligas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px 0 0; white-space: nowrap; }
  .portada { padding-top: 150px; }
  section[id] { scroll-margin-top: 118px; }
}
section[id] { scroll-margin-top: 84px; }
.btn--chico { min-height: 44px; }
.pago__cierre a, .pie a { display: inline-block; padding: 12px 0; }

/* 6. La runa se traza cuando ya está a la vista, no antes */
.js .nombre.visible .nombre__runa path { stroke-dashoffset: 60; }
.js .nombre__runa.trazada path { stroke-dashoffset: 0 !important; }

#telefono-portada { scroll-margin-top: 100px; }
@media (max-width: 860px) { #telefono-portada { scroll-margin-top: 130px; } }


/* ---------- Cuentas: cuatro columnas separadas por hairlines, sin tarjetas ---------- */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); border-top: 1px solid var(--linea); }
.rol { padding: 32px 28px 26px 0; border-bottom: 1px solid var(--linea); }
.rol h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); margin-bottom: 4px; }
.rol__sub { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-claro); margin-bottom: 16px; }
.rol p { color: var(--hueso-suave); }
.rol__no { font-size: 1rem; color: var(--gris) !important; padding-top: 14px; margin: 14px 0 0; border-top: 1px dashed var(--linea); }
.roles__nota { margin-top: 28px; }
.rol .rol__sub { color: var(--ambar-claro); }


/* ============================================================
   CELULAR: el mismo efecto que en computadora (18/09)
   La pantalla de la app se queda fija arriba y cambia mientras el texto pasa
   por debajo. Solo con JavaScript; sin él, cada paso enseña su propia foto.
   ============================================================ */
@media (max-width: 860px) {
  .js .historia__rejilla { display: grid; grid-template-columns: 1fr; gap: 0; }
  .js .historia__fijo {
    display: block; order: -1; position: sticky; top: 104px; z-index: 5;
    margin: 0 -5vw; padding: 10px 5vw 0; background: var(--noche);
  }
  .js .historia__fijo::after {   /* el texto se desvanece al meterse debajo */
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 46px; pointer-events: none;
    background: linear-gradient(to bottom, var(--noche), transparent);
  }
  .js .telefono--pila {
    position: relative; top: auto; width: min(310px, 82vw); height: 38vh; margin: 0 auto; overflow: hidden;
    border-radius: 30px 30px 0 0; border: 7px solid #2A2621; border-bottom: 0; background: #2A2621;
    box-shadow: 0 -10px 60px -20px rgba(208, 138, 78, .45);
  }
  .js .telefono--pila img { width: 100%; border: 0; border-radius: 22px 22px 0 0; box-shadow: none; transform: translateY(40px) scale(.97); }
  .js .telefono--pila img.activa { transform: none; }
  .js .paso { min-height: 0; justify-content: flex-start; padding: 34px 0 10px; max-width: none; opacity: .4; border-top: 0; }
  .js .paso.activo { opacity: 1; }
  .js .paso__foto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
  .js .paso:last-child { padding-bottom: 8vh; }
  .js .paso h3 { font-size: 1.45rem; margin-bottom: 10px; }
  .js .paso p { font-size: .98rem; line-height: 1.5; margin-bottom: 0; }
  .js .paso__num { margin-bottom: 8px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .js .telefono--pila img { transform: none; }
}

/* Celular: de cada captura se enseña la parte que importa, no siempre la de arriba */
@media (max-width: 860px) {
  .js .telefono--pila img { height: 100%; object-fit: cover; object-position: 50% 0; }
  .js .telefono--pila img:nth-child(2) { object-position: 50% 42%; }   /* la ficha: "se repite: retuvo la placenta" */
  .js .telefono--pila img:nth-child(3) { object-position: 50% 78%; }   /* pesos: las cifras y las barras */
  .js .telefono--pila img:nth-child(4) { object-position: 50% 12%; }   /* pendientes */
}
@media (max-width: 860px) and (max-height: 700px) { .js .telefono--pila { height: 33vh; } }
@media (max-width: 860px) { .js .historia__fijo { top: 90px; padding-top: 22px; } }
/* 24/09: la pantalla se desvanecía abajo, pero el marco no: sus dos lados bajaban y terminaban
   en seco, como un teléfono roto a la mitad. Ahora se desvanece todo junto con una máscara. */
@media (max-width: 860px) {
  .js .telefono--pila {
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
  }
}

.roles__clave { max-width: 62ch; margin: -28px 0 44px; padding-left: 18px; border-left: 2px solid var(--ambar-claro); color: var(--hueso-suave); font-size: 1.08rem; }


/* ---------- Lo que te ahorra / Seguridad: rejillas con hairlines, sin tarjetas ---------- */
.ahorros, .seguros { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(28px, 5vw, 70px); border-top: 1px solid var(--linea); }
.ahorro, .seguro { padding: 30px 0 22px; border-bottom: 1px solid var(--linea); }
.ahorro h3, .seguro h3 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.55rem); margin-bottom: 10px; }
.ahorro p, .seguro p { color: var(--hueso-suave); margin: 0; }
.seguro h3::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ambar-claro); margin-right: 12px; vertical-align: middle; }
.dice { font-family: var(--sans); font-style: normal; font-size: 1em; letter-spacing: .04em; color: var(--gris); white-space: nowrap; }

/* ---------- De dónde viene (23/09: la prueba de rancho real va arriba) ---------- */
.origen h2 { max-width: 20ch; }
.origen__texto { font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + .7vw, 1.75rem); line-height: 1.5; color: var(--hueso); margin: 0; }
.origen__firma { margin: 28px 0 0; color: var(--ambar-claro); font-size: 1rem; letter-spacing: .04em; }
.origen__firma::before { content: '— '; }

/* En el celular la página era un muro de 13,000 px: menos aire entre secciones. */
@media (max-width: 860px) {
  :root { --aire: 64px; }
  h2 { margin-bottom: 32px; }
  /* Pasos y pagos: el número a un lado del texto, no encima. */
  .pasos li { flex-direction: row; align-items: baseline; gap: 16px; padding: 24px 0 14px; }
  .pasos__num, .pago__num { font-size: 2.4rem; min-width: 1.1em; }
  .pago { padding-top: 24px; }
  .pago__num { margin-bottom: 8px; }
  .rol { padding: 22px 0 18px; }
  .rol__sub { margin-bottom: 10px; }
  .roles__clave { margin: -12px 0 28px; }
}

/* El titular del 23/09 es más largo que el anterior ("Tu ganado en el celular.
   Nosotros lo capturamos."): en computadora va más chico para que el botón
   quepa en la primera pantalla. */
@media (min-width: 861px) {
  .portada h1 { font-size: clamp(3rem, min(.8rem + 4.6vw, 9vh + 1rem), 5.6rem); }
}

/* ============================================================
   FEHU (23/09): el nombre quedó decidido y la página principal es Fehu.
   Lo que antes vivía en fehu/fehu.css y hace falta aquí.
   ============================================================ */
.marca { font-size: 1.55rem; letter-spacing: .01em; }
.marca__ojo { width: 30px; height: 30px; }
/* La marca nunca va sola: "Fehu · control ganadero" */
.marca__desc { font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--linea); align-self: center; }
/* En celular el descriptor va debajo del nombre, para que quepa el botón. */
@media (max-width: 560px) {
  .marca { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; line-height: 1; font-size: 1.35rem; }
  .marca__ojo { grid-row: span 2; }
  .marca__desc { margin: 4px 0 0; padding: 0; border: 0; font-size: .72rem; letter-spacing: .08em; }
}

.nombre__rejilla { display: grid; grid-template-columns: minmax(140px, 300px) 1fr; gap: clamp(36px, 8vw, 120px); align-items: start; }
.nombre__runa { width: 100%; height: auto; color: var(--ambar-claro); filter: drop-shadow(0 0 40px rgba(var(--ambar-claro-rgb), .35)); position: sticky; top: 120px; }
.nombre h2 { max-width: 16ch; margin-bottom: 28px; }
.nombre p { color: var(--hueso-suave); max-width: 52ch; }
.js .nombre__runa path { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 2.2s ease .2s; }
.js .nombre__runa.trazada path { stroke-dashoffset: 0; }
@media (max-width: 760px) { .nombre__rejilla { grid-template-columns: 1fr; } .nombre__runa { width: 110px; position: static; } }
@media (prefers-reduced-motion: reduce) { .js .nombre__runa path { stroke-dashoffset: 0; transition: none; } }

/* Foto con el abuelo (se activa cuando exista el archivo) */
.origen__foto { margin-top: 40px; }
.origen__foto img { width: 100%; border-radius: 14px; }
.origen__foto figcaption { margin-top: 10px; font-size: .95rem; color: var(--gris); }

/* ---------- Ronda 3 (23/09): cuentas en lista, qué incluye la puesta en marcha, Fehu al pie ---------- */
.roles-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.roles-lista li { display: grid; grid-template-columns: minmax(170px, 240px) 1fr; gap: 6px 28px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.roles-lista strong { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--hueso); }
.roles-lista span { color: var(--hueso-suave); }
@media (max-width: 640px) { .roles-lista li { grid-template-columns: 1fr; padding: 16px 0; } }

.incluye { list-style: none; padding: 0; margin: 14px 0 0; }
.incluye li { position: relative; padding: 8px 0 8px 26px; color: var(--hueso-suave); }
.incluye li::before { content: '✓'; position: absolute; left: 0; top: 8px; color: var(--ambar-claro); }

.pie__nombre { margin-top: 22px; max-width: 70ch; font-size: .95rem; color: var(--hueso-suave); }
.pie__nombre strong { color: var(--hueso); font-weight: 500; }

/* Ronda 4 (23/09): en celular la barra lleva solo la marca y "Pedir informes"; las cuatro
   ligas eran letra chica sin uso para quien tiene 60 años. En escritorio se quedan. */
@media (max-width: 860px) {
  .nav nav { display: none; }
  .nav__fila { flex-wrap: nowrap; }
  .portada { padding-top: 112px; }
  section[id] { scroll-margin-top: 80px; }
}

/* ============================================================
   PRECIOS (25/09, mock-up de Beto) — dos pagos, uno arriba del otro:
   1 · la puesta en marcha; 2 · el servicio a lo ancho con tres tarjetas y un
   solo mensual/anual (precios.js; sin confeti desde el 02/10). El elegido del
   selector lleva fondo claro, borde y palomita, no solo color (el abuelo es
   daltónico). Sin precios.js las tarjetas se ven con su precio mensual.
   ============================================================ */
.pago--marcha, .pago--servicio {
  margin-top: 30px; padding: clamp(24px, 3.4vw, 44px); border-radius: 30px;
  background: linear-gradient(160deg, rgba(var(--hueso-rgb), .06), rgba(var(--hueso-rgb), .02));
  border: 1px solid rgba(var(--hueso-rgb), .13);
  box-shadow: inset 0 1px 0 rgba(var(--hueso-rgb), .07), 0 30px 80px -40px rgba(0, 0, 0, .8);
}
.pago__cabeza { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pago__cabeza .pago__num { margin: 0; }
.pago__cabeza h3 { margin: 0; }
.pago .pago__tipo { margin: 0 0 4px; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-claro); }
.pago__cuerpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.pago__cuerpo p, .servicio__texto { color: var(--hueso-suave); }
.marcha__caja { padding: 24px 26px; border-radius: 22px; background: rgba(var(--hueso-rgb), .04); box-shadow: inset 0 0 0 1px var(--linea); }
.marcha__ejemplo { margin: 0; }
.marcha__caja .marcha__monto { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); line-height: 1; color: var(--hueso); font-variant-numeric: tabular-nums; }
.marcha__iva { font-family: var(--sans); font-size: 1rem; color: var(--gris); }
.marcha__nota { margin: 10px 0 0; font-size: .95rem; }
/* Las dos formas de pagar la puesta en marcha (25/09). Prefijo .pago--marcha: las reglas viejas
   ".pago p/.pago li/.pago ul" (clase+tipo) si no, les ganan. Lo de regalo o no lleva palomita o
   raya además del color (el abuelo es daltónico). */
.pago--marcha .marcha__pregunta { margin: 28px 0 0; color: var(--hueso); font-weight: 600; }
.pago--marcha .marcha__opciones { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pago--marcha .marcha__opcion { padding: 22px 24px; border: 0; border-radius: 22px; background: rgba(var(--hueso-rgb), .04); box-shadow: inset 0 0 0 1px var(--linea); }
.pago--marcha .marcha__opcion:first-child { box-shadow: inset 0 0 0 1px rgba(var(--ambar-claro-rgb), .55); }
.marcha__tipo { margin: 0; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--hueso); }
.pago--marcha .marcha__cifra { margin: 12px 0 0; font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1.05; color: var(--hueso); font-variant-numeric: tabular-nums; }
.pago--marcha .marcha__como { margin: 10px 0 0; }
.pago--marcha .marcha__regalo { margin: 10px 0 0; color: var(--ambar-claro); font-weight: 600; }
.pago--marcha .marcha__sin { margin: 10px 0 0; color: var(--gris); }
@media (max-width: 640px) { .pago--marcha .marcha__opciones { grid-template-columns: minmax(0, 1fr); } }
.servicio__texto { max-width: 62ch; margin: 0; }

.plan fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.plan .plan__periodo:not([hidden]) {
  display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px; border-radius: 999px;
  background: rgba(var(--hueso-rgb), .05); box-shadow: inset 0 0 0 1px var(--linea); max-width: 100%;
}
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 999px; font-size: 1rem; color: var(--hueso-suave); transition: background .25s, color .25s, box-shadow .25s;
}
.opcion input:checked + span { background: var(--hueso); color: var(--noche); font-weight: 600; box-shadow: inset 0 0 0 1px var(--hueso); }
.opcion input:checked + span::before { content: '✓'; font-weight: 700; }
.opcion input:focus-visible + span { outline: 2px solid var(--ambar-claro); outline-offset: 3px; }
.opcion:hover input:not(:checked) + span { color: var(--hueso); background: rgba(var(--hueso-rgb), .06); }
.plan__ahorro { white-space: nowrap; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ambar-claro); color: var(--noche); }

.pago--servicio .tarjetas { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* .tarjetas .tarjeta: la tarjeta es un <li> dentro de .pago, y ".pago li" le quitaba el relleno. */
.tarjetas .tarjeta {
  display: flex; border-top: 0; flex-direction: column; padding: 26px 24px 24px; border-radius: 22px;
  background: rgba(var(--hueso-rgb), .04); box-shadow: inset 0 0 0 1px var(--linea);
}
.tarjeta__titulo { margin: 0; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--hueso); }
.tarjetas .tarjeta__monto { margin: 18px 0 0; font-family: var(--serif); font-size: clamp(3rem, 2.2rem + 2.6vw, 4.4rem); line-height: 1; color: var(--hueso); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tarjeta__signo { font-size: .5em; color: var(--gris); margin-right: 4px; vertical-align: .55em; }
.tarjetas .tarjeta__per { margin: 8px 0 0; color: var(--gris); font-size: .95rem; }
.tarjetas .tarjeta__nota { margin: 10px 0 0; color: var(--ambar-claro); font-size: .95rem; min-height: 0; }
.tarjeta__nota:empty { display: none; }
.tarjeta__extra { margin: auto 0 0; padding-top: 14px; font-size: .9rem; color: var(--hueso-suave); }
.pago--servicio .plan__lista { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.plan__lista li { border-top: 0; padding: 8px 0 8px 26px; }
.servicio__pie { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.servicio__pie .plan__pie { margin: 0; font-size: .9rem; color: var(--gris); }
@media (max-width: 860px) {
  .pago__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pago--servicio .tarjetas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tarjetas .tarjeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 20px 20px; }
  .tarjeta__titulo { grid-column: 1 / -1; }
  .tarjetas .tarjeta__monto { margin-top: 6px; }
  .tarjetas .tarjeta__per { margin: 0; text-align: right; }
  .tarjetas .tarjeta__nota, .tarjeta__extra { grid-column: 1 / -1; margin-top: 4px; padding-top: 0; }
  .pago--servicio .plan__lista { grid-template-columns: minmax(0, 1fr); }
  .servicio__pie .btn { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .plan .plan__periodo:not([hidden]) { display: flex; }
  .plan__periodo .opcion { flex: 1; }
  .opcion span { padding: 0 12px; }
  /* "ahorra 20 %" baja debajo de "Anual" en vez de ensanchar la pastilla (a 320 px se salía). */
  #plan-anual span { flex-direction: column; gap: 2px; }
  /* A 320-360 px el precio anual (p. ej. "$8,640") se salía de su columna y se encimaba
     con "al año, más IVA". Se apila: una sola columna y el periodo a la izquierda, debajo. */
  .tarjetas .tarjeta { grid-template-columns: minmax(0, 1fr); }
  .tarjetas .tarjeta__per { text-align: left; }
}

/* ============================================================
   SIN ANIMACIONES DE ADORNO (02/10/2026)
   Quien usa la página tiene unos 60 años: el rebaño, el título palabra por
   palabra y la barra de avance hacían que "actuara raro al scrollear". Por decisión de Beto solo quedan
   el teléfono de "Qué hace" que cambia de pantalla al bajar y el confeti.
   ============================================================ */
.js .pal__in, .js .portada .rotulo, .js .portada__texto, .js .portada__botones,
.js .telefono--portada, .probar__punto { animation: none; opacity: 1; transform: none; }
.portada::before { animation: none; opacity: 1; }   /* sin tocar su transform: lo centra */
html { scroll-behavior: auto; }
.js .aparece, .js .tabla-precio tbody tr, .js .pasos li { opacity: 1; transform: none; transition: none; }

/* Contacto: probar la demo ANTES de llenar nada */
.probar-antes { margin-top: 26px; padding: 20px 22px; border: 1px solid var(--linea); border-radius: 14px; }
.probar-antes p { margin: 0 0 14px; color: var(--hueso-suave); }
.ventana-barra { min-height: 52px; }
.ventana-cerrar { min-height: 44px; }
.ventana-quiero { margin-left: auto; margin-right: 10px; color: var(--noche); background: var(--ambar-claro); border-radius: 999px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; font: 600 .85rem var(--sans); text-decoration: none; white-space: nowrap; }
/* 320 px: la marca con "control ganadero" y el botón no caben juntos (qa 02/10) */
@media (max-width: 360px) { .marca__desc { display: none; } }
.confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }

/* A2 (02/10): línea de tiempo de la puesta en marcha y "Para tu rancho" del formulario */
.tiempo { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 14px; counter-reset: paso; }
.tiempo li { display: grid; grid-template-columns: 2.2em 1fr; gap: 4px 14px; align-items: baseline; }
.tiempo li::before { counter-increment: paso; content: counter(paso); grid-row: span 2; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--ambar-claro); }
.tiempo__cuando { font-size: 1.05rem; color: var(--hueso); }
.tiempo li span { color: var(--hueso-suave); }
.tiempo__siempre { margin: 0 0 26px; color: var(--hueso-suave); font-size: .98rem; }
.para-ti { margin: 6px 0 18px; padding: 16px 18px; border: 1px solid var(--ambar-claro); border-radius: 14px; }
.para-ti p { margin: 0 0 8px; }
.para-ti__titulo { font-weight: 600; color: var(--ambar-claro); }
.para-ti__precio { font-size: 1.1rem; color: var(--hueso); }
.para-ti__sirve, .para-ti__quien { color: var(--hueso-suave); }
.para-ti__nota { font-size: 1rem; color: var(--hueso-suave); margin-bottom: 0 !important; }
.para-ti__sirve:empty, .para-ti__quien:empty { display: none; }