/* Fraunces y DM Sans, SIL Open Font License 1.1 (licencias en /fonts/OFL-*.txt).
   Subconjunto latino en WOFF2 conservando los ejes variables. */
@font-face{font-family:"Fraunces";src:url("/fonts/Fraunces.woff2") format("woff2");font-display:swap;font-weight:100 900}
@font-face{font-family:"DM Sans";src:url("/fonts/DMSans.woff2") format("woff2");font-display:swap;font-weight:100 1000}
:root{
  /* Paleta unificada con la app. Los valores son los de `MycoColors`
     (`rodal/app/lib/design/tokens.dart`), no aproximaciones: la página
     incrusta cinco capturas de la app, y con la paleta anterior el crema y el
     verde quedaban «casi» iguales, que se lee peor que estar claramente
     distinto. La autoridad visual está en `DESIGN.md`. */

  /* Superficies */
  --cream:#F5F0E8;      /* app bg */
  --surface:#FFFFFF;    /* app surface */
  --paper:#FFFEFA;      /* app paper */

  /* Marca. El pino es la ÚNICA marca de acción, igual que en la app: botones,
     enlaces y estados positivos. Nunca decoración. */
  --pine:#2D6A4F;       /* app primary */
  --pine-deep:#1B6B3A;  /* app primaryDark */
  --earth:#8B5E3C;      /* app secondary */
  --amber:#DDA448;      /* solo web: la app no tiene acento ámbar */

  /* Panel verde oscuro. Tomado del hero de la portada de la app
     (`heroDe`/`heroA` y sus tres niveles de texto), que es exactamente el
     mismo problema resuelto allí: una superficie profunda con texto encima. */
  --forest:#183C30;     /* app heroDe */
  --forest-lit:#27624B; /* app heroA */
  --forest-deep:#0F2A21;/* pie: un paso más hondo que el hero */
  --on-forest:#D7ECDD;  /* app heroFg */
  --on-forest-2:#D8E3DC;/* app heroFg2 */
  --on-forest-3:#BFD2C6;/* app heroFg3 */

  /* Texto */
  --ink:#1C1C1A;        /* app fg */
  --muted:#55554D;      /* app fg2 */
  --line:rgba(32,35,31,.14); /* app line */

  /* Estado */
  --danger:#B93E3D;     /* app danger */
  --notice-bg:#FFF3DF;  /* app avisoBg */
  --tag-free-bg:#EAF3DE;/* app gradeABg */
  --tag-free-fg:#1B6B3A;/* app gradeAFg */
  --tag-paid-fg:#3B2A08;
  --danger-bg:#FFF0EB;
  --pin:#D96A41;  /* chincheta del mapa ilustrado: solo web */

  /* Profundidad. La doctrina es la de la app —separar con sombra, nunca con
     un borde alrededor de la tarjeta— expresada a escala de pagina: estas
     superficies son grandes y se miran de lejos. */
  --shadow:0 24px 70px rgba(30,50,39,.12);
  --shadow-pin:0 10px 30px rgba(0,0,0,.2);
  /* Formas. Escala de `MycoRadius` de la app; antes habia diez valores
     sueltos (1.2rem, 1.35rem, 1.5rem, 99px, 999px...) sin sistema.
     Las formas organicas del hero ilustrado quedan aparte a proposito: son
     ilustracion, no interfaz. */
  --r-sm:4px;
  --r-card:12px;
  --r-card-lg:16px;
  --r-panel:20px;
  --r-pill:999px;
  --radius:var(--r-panel);
  --serif:"Fraunces",Georgia,serif;
  --sans:"DM Sans",system-ui,sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cream)}
body{margin:0;color:var(--ink);font-family:var(--sans);line-height:1.65;background:radial-gradient(circle at 85% 8%,rgba(221,164,72,.12),transparent 30rem),var(--cream)}
a{color:inherit;text-underline-offset:.22em}a:hover{text-decoration-thickness:2px}img{max-width:100%}
/* Anillo doble. El ámbar sobre el crema daba 1,90:1 y era invisible: WCAG 2.2
   pide 3:1 para un indicador de foco. Con dos aros —halo claro pegado al
   elemento y aro oscuro fuera— siempre hay uno que contrasta, tanto sobre el
   crema como sobre el verde de los botones, las capas de pago y el pie.
   Peor caso medido: 5,33:1. */
:focus-visible{outline:3px solid var(--forest);outline-offset:3px;box-shadow:0 0 0 3px var(--paper);border-radius:var(--r-sm)}
.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:100;padding:.75rem 1rem;background:var(--pine);color:white;transform:translateY(-180%)}.skip-link:focus{transform:none}
.site-header{position:relative;z-index:10;border-bottom:1px solid var(--line)}
.nav{max-width:1180px;margin:auto;min-height:5.25rem;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;min-height:44px;gap:.7rem;text-decoration:none;font-family:var(--serif);font-size:1.55rem;font-weight:750;letter-spacing:-.03em}.brand img{width:2.35rem;height:2.35rem;border-radius:var(--r-card)}
.nav__links{display:flex;align-items:center;gap:1.1rem;font-size:.86rem;font-weight:700}
/* 44 px de alto: los enlaces medían 22 y son la navegación principal. El
   relleno lateral separa además las zonas de toque entre sí. */
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.35rem;text-decoration:none}.nav__links a[aria-current="page"],.nav__links a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:3px}
.language-switcher{display:flex;align-items:center;gap:.15rem;padding:.2rem;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.72rem;font-weight:800;white-space:nowrap}.language-switcher a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:.5rem;border-radius:var(--r-pill);color:inherit;text-decoration:none}.language-switcher a:hover,.language-switcher a[aria-current="true"]{background:var(--forest);color:var(--on-forest)}
.button--light{background:var(--paper);color:var(--ink)}.button--light:hover{background:var(--surface)}
main{max-width:1180px;margin:auto;padding:0 1.25rem 6rem}
.hero{min-height:calc(100vh - 9rem);display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:clamp(2rem,6vw,6rem);padding:5rem 0}
.eyebrow{margin:0 0 .9rem;text-transform:uppercase;letter-spacing:.14em;font-size:.73rem;font-weight:800;color:var(--earth)}
h1,h2,h3{font-family:var(--serif);line-height:1.05;letter-spacing:-.035em;color:var(--ink)}h1{font-size:clamp(3rem,7vw,6.8rem);margin:.1em 0 .3em;font-weight:650}h2{font-size:clamp(2rem,4.3vw,4rem);margin:.15em 0 .45em;font-weight:600}h3{font-size:1.55rem;margin:.4rem 0}.hero__lead{max-width:40rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}
.actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.15rem;border-radius:var(--r-pill);background:var(--pine);color:white;text-decoration:none;font-weight:750}.button:hover{background:var(--pine-deep)}.button--quiet{color:var(--pine);background:transparent;border:1px solid var(--pine)}.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:750;color:var(--pine)}
.field-map{position:relative;min-height:32rem;overflow:hidden;border-radius:48% 48% 42% 58%/45% 55% 45% 55%;background:linear-gradient(145deg,var(--forest-lit),var(--forest));box-shadow:var(--shadow)}.field-map:before,.field-map:after,.field-map__ring{content:"";position:absolute;border:2px solid rgba(245,237,222,.28);border-radius:45% 55% 38% 62%}.field-map:before{inset:8% 13% 12% 8%;transform:rotate(12deg)}.field-map:after{inset:22% -12% 26% 20%;transform:rotate(-9deg)}.field-map__ring--one{inset:32% 18% -8% -9%;transform:rotate(7deg)}.field-map__ring--two{inset:-12% 36% 40% -8%;transform:rotate(-18deg)}.field-map__trail{position:absolute;width:55%;height:3px;left:18%;top:64%;background:repeating-linear-gradient(90deg,var(--amber) 0 12px,transparent 12px 23px);transform:rotate(-25deg)}.field-map__pin{position:absolute;right:24%;top:30%;width:2.8rem;height:2.8rem;background:var(--pin);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:var(--shadow-pin)}.field-map__pin:after{content:"";position:absolute;width:.8rem;height:.8rem;background:var(--cream);border-radius:50%;left:1rem;top:1rem}.field-map__label{position:absolute;left:10%;bottom:9%;color:rgba(255,255,255,.74);letter-spacing:.13em;font-size:.68rem}
.section{padding:6rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem);align-items:start}.section__lead{font-size:1.2rem;color:var(--muted);max-width:36rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(255,250,240,.5)}.feature{min-height:20rem;padding:2rem;border-right:1px solid var(--line)}.feature:last-child{border-right:0}.feature__number{font-family:var(--serif);font-size:.85rem;color:var(--earth)}.feature p{color:var(--muted)}
.highlight-card{padding:4rem;margin:6rem 0;background:var(--forest);color:var(--on-forest);border:0;border-radius:var(--radius);box-shadow:var(--shadow)}.highlight-card h2,.highlight-card .eyebrow,.highlight-card .text-link{color:var(--on-forest)}.highlight-card p{color:var(--on-forest-2)}.responsible{text-align:center;display:block}.responsible h2{max-width:14ch;margin:.3rem auto}.responsible__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:50rem;margin:2rem auto;color:var(--muted)}
.notice{max-width:57rem;margin:2rem auto 0;padding:1rem 1.2rem;border-left:2.5px solid var(--earth);background:var(--notice-bg)}.notice p{margin:.25rem 0 0;color:var(--muted)}.notice--review{border-color:var(--danger);background:var(--danger-bg)}.notice--review strong{color:var(--danger)}
.legal-hero{max-width:57rem;margin:5rem auto 3rem}.legal-hero h1{font-size:clamp(3rem,7vw,6rem)}.legal-hero>p:last-child{font-size:1.15rem;color:var(--muted)}.legal-meta{font-size:.86rem;color:var(--earth)}
.toc{max-width:57rem;margin:0 auto 3rem;padding:1rem 0;border-block:1px solid var(--line);display:flex;gap:.9rem 1.4rem;flex-wrap:wrap;font-size:.87rem}.toc strong{width:100%;color:var(--pine)}
.legal-copy{max-width:57rem;margin:auto}.legal-copy section{padding:2rem 0;border-top:1px solid var(--line);scroll-margin-top:2rem}.legal-copy h2{font-size:clamp(1.65rem,3vw,2.35rem)}.legal-copy p,.legal-copy li{color:var(--muted)}.legal-copy li+li{margin-top:.65rem}.legal-copy code,.steps code,.contact-card code{background:rgba(16,63,50,.08);padding:.15em .35em;border-radius:var(--r-sm)}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:4rem 0}.support-grid article{background:rgba(255,250,240,.65);border:1px solid var(--line);border-radius:var(--r-card-lg);padding:2rem}.support-grid h2{font-size:1.7rem}.support-grid__warning{border-color:var(--danger)!important;background:var(--danger-bg)!important}.support-grid li{margin-bottom:.5rem;color:var(--muted)}
.contact-card{margin:4rem 0;padding:2.5rem;background:var(--forest);color:var(--on-forest);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:2rem}.contact-card h2{color:var(--on-forest);font-size:clamp(1.45rem,3vw,2.1rem);overflow-wrap:anywhere}.contact-card p{color:var(--on-forest-2)}.contact-card .button{flex:0 0 auto}
.related{padding-top:2rem}.related__links{display:flex;flex-wrap:wrap;gap:.75rem}.related__links a{padding:.65rem .9rem;border:1px solid var(--line);border-radius:var(--r-pill);text-decoration:none}.related__links a:hover{background:var(--paper)}
.steps{max-width:57rem;margin:4rem auto}.steps>h2{font-size:2.2rem}.steps ol{list-style:none;padding:0;margin:0}.steps li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.25rem 0;border-top:1px solid var(--line)}.steps li>span{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--pine);color:white;font-family:var(--serif)}.steps p{margin:.2rem 0;color:var(--muted)}
.security-features{margin:4rem 0}.security-features h2{font-size:1.7rem}
.hero__model{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0 0;font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pine)}.hero__model span[aria-hidden]{color:var(--amber)}
.pull-quote{margin:2rem 0 0;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
.layers{padding:6rem 0;border-top:1px solid var(--line)}.layers__intro{max-width:46rem}.layers__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3.5rem}
/* `min-width:0`: un ítem de rejilla mide por defecto su contenido mínimo MÁS
   el relleno, así que con el texto al 200 % la pista crecía a 385 px dentro de
   un contenedor de 311 y la tarjeta se salía de la pantalla.
   El relleno se acota con `min()` para que siga creciendo con el texto sin
   llegar a comerse un tercio del ancho: a 100 % no cambia nada. */
.layer{min-width:0;padding:min(2.5rem,7vw);border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,250,240,.6)}.layer--paid{background:var(--forest);border-color:var(--forest-deep);color:var(--on-forest-2)}.layer h3{font-size:clamp(2rem,3.4vw,2.9rem);margin:.2rem 0 .6rem}.layer--paid h3{color:var(--on-forest)}
.layer__tag{display:inline-block;margin:0;padding:.35rem .75rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;background:var(--tag-free-bg);color:var(--tag-free-fg)}.layer--paid .layer__tag{background:var(--amber);color:var(--tag-paid-fg)}
.layer__lead{font-size:1.1rem;color:var(--muted)}.layer--paid .layer__lead{color:var(--on-forest-2)}
.layer ul{margin:1.5rem 0;padding-left:1.1rem}.layer li{margin-bottom:.55rem;color:var(--muted)}.layer--paid li{color:var(--on-forest-2)}
.layer .text-link{display:inline-block;margin-top:1rem}.layer--paid .text-link{color:var(--on-forest)}.layer__note{margin:0;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}.layer--paid .layer__note{border-color:rgba(255,255,255,.2);color:var(--on-forest-3)}
.journey{list-style:none;padding:0;margin:0}.journey li{display:grid;grid-template-columns:2.75rem 1fr;gap:1.1rem;padding:1.35rem 0;border-top:1px solid var(--line)}.journey li:first-child{border-top:0;padding-top:0}.journey li>span{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--pine);color:var(--surface);font-family:var(--serif);font-weight:700}.journey strong{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--ink)}.journey p{margin:.2rem 0 0;color:var(--muted)}
.personas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.personas li{padding:1.5rem;border-radius:var(--r-card-lg);border:1px solid var(--line);background:rgba(255,250,240,.6)}.personas strong{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin-bottom:.3rem}.personas p{margin:0;color:var(--muted);font-size:.95rem}
.honesty__list{list-style:none;padding:0;margin:0}.honesty__list li{padding:1.25rem 0;border-top:1px solid var(--line);color:var(--muted)}.honesty__list li:first-child{border-top:0;padding-top:0}.honesty__list strong{color:var(--ink)}
.faq{max-width:57rem;margin:0 auto 4rem}.faq__item{border-top:1px solid var(--line)}.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.4rem 2.5rem 1.4rem 0;position:relative}.faq summary::-webkit-details-marker{display:none}
.faq summary h2{margin:0;font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.02em;line-height:1.3}
.faq summary:after{content:"";position:absolute;right:.5rem;top:2rem;width:.7rem;height:.7rem;border-right:2px solid var(--pine);border-bottom:2px solid var(--pine);transform:rotate(45deg);transition:transform .2s}
.faq__item[open] summary:after{transform:rotate(-135deg)}
.faq summary:hover h2{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:3px}
.faq__answer{padding:0 2.5rem 1.6rem 0}.faq__answer p{margin:0;color:var(--muted)}
.shots{padding:6rem 0;border-top:1px solid var(--line)}.shots__intro{max-width:44rem}.shots__grid{list-style:none;padding:0;margin:3.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1.5rem}.shots figure{margin:0}.shots img{display:block;width:100%;height:auto;border-radius:var(--r-card-lg);border:1px solid var(--line);box-shadow:var(--shadow)}.shots figcaption{margin-top:1rem;font-size:.88rem;color:var(--muted)}.shots figcaption strong{display:block;margin-bottom:.15rem;font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--ink)}
.site-footer{background:var(--forest-deep);color:var(--on-forest);padding:4rem 1.25rem 2rem}.footer__inner{max-width:1180px;margin:auto}.footer__top{display:grid;grid-template-columns:1.2fr 2fr;gap:4rem;padding-bottom:3rem}.footer__tagline{font-family:var(--serif);font-size:2rem;line-height:1.1;max-width:15ch}.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.footer__nav div{display:flex;flex-direction:column}.footer__nav strong{text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--on-forest-3)}.footer__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--on-forest)}.footer__bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;color:var(--on-forest-3)}
@media(max-width:860px){.nav{align-items:center;flex-wrap:wrap}.nav__links{max-width:100%;justify-content:flex-start;flex-wrap:wrap;gap:.5rem 1.1rem}.hero{grid-template-columns:1fr;padding:4rem 0}.field-map{min-height:24rem}.section{grid-template-columns:1fr;padding:4rem 0}.feature-grid,.support-grid{grid-template-columns:1fr}.feature{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.feature:last-child{border-bottom:0}.highlight-card{margin:4rem 0;padding:2rem}.footer__top{grid-template-columns:1fr;gap:2rem}.shots{padding:4rem 0}.shots__grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.layers{padding:4rem 0}.layers__grid{grid-template-columns:1fr;margin-top:2.5rem}.layer{padding:min(1.85rem,9vw)}.personas{grid-template-columns:1fr}}
@media(max-width:540px){main{padding-inline:1rem}.nav{min-height:auto;padding:.9rem 1rem;gap:.75rem}.brand{font-size:1.35rem}.nav__links{width:100%;gap:.4rem .9rem;font-size:.82rem}.language-switcher{margin-left:auto}.hero{min-height:auto;padding-top:3rem}.field-map{min-height:20rem}.responsible__grid{grid-template-columns:1fr}.contact-card{align-items:flex-start;flex-direction:column;padding:1.75rem}.footer__nav{grid-template-columns:1fr 1fr}.footer__bottom{flex-direction:column}.legal-hero{margin-top:3rem}.toc{gap:.6rem 1rem}
/* Carrusel con scroll-snap: sin JavaScript y sin recortar las capturas. */
.shots__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;overscroll-behavior-x:contain}.shots__grid>li{scroll-snap-align:start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(prefers-contrast:more){:root{--muted:#27342e;--line:rgba(9,42,34,.55)}.button--quiet{background:var(--paper)}}
/* Las páginas legales se imprimen y se archivan: que salgan legibles y con
   las URLs visibles, sin decoración ni elementos de navegación. */
@media print{
  :root{--cream:#fff;--paper:#fff;--muted:#333;--line:#bbb}
  body{background:#fff;color:#000;font-size:11pt}
  .site-header,.site-footer,.skip-link,.actions,.field-map,.related,.contact-card,.toc,.shots{display:none!important}
  main{max-width:none;padding:0}
  h1{font-size:22pt}h2{font-size:14pt}h3{font-size:12pt}
  .legal-hero,.legal-copy{max-width:none;margin:0}
  .legal-copy section{padding:.6rem 0;break-inside:avoid}
  .faq__item{border:0}.faq__answer{display:block!important;padding:0 0 .8rem}
  a{color:#000;text-decoration:underline}
  .legal-copy a[href^="http"]:after,.legal-copy a[href^="/"]:after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .highlight-card,.layer--paid{background:#fff!important;color:#000!important;box-shadow:none;border:1px solid #bbb}
}