:root{
  --paper:#f3f6ee; --paper2:#e4ecd9; --ink:#1d2e27;
  --green:#23694f; --deep:#0f3a2c; --lime:#dff477;
  --sea:#1f4f60; --sky:#b5e3e9; --ochre:#f2d24b; --leaf:#9ad27a;
  --m:clamp(16px,2.8vw,40px); --r:28px;
  /* Cinco tamaños: display, título, frase, texto, nota */
  --t-xl:clamp(88px,15vw,230px);
  --t-l:clamp(44px,5.2vw,84px);
  --t-m:clamp(24px,2.3vw,34px);
  --t-s:20px;
  --t-xs:15px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:500 var(--t-s)/1.55 Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
figure{margin:0}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.03em;line-height:.95}
b{font-weight:900}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
::selection{background:var(--lime);color:var(--ink)}

/* Barra */
.bar{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:28px;padding:12px var(--m);background:var(--green);color:var(--paper);font-size:var(--t-xs);font-weight:700}
.mark{font-size:var(--t-m);font-weight:900;letter-spacing:-.04em;text-decoration:none}
.bar nav{display:flex;gap:24px;margin-left:auto}
.bar nav a{text-decoration:none;padding:10px 0;position:relative}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.bar nav a:hover::after{transform:scaleX(1)}

/* Botones: siempre redondos */
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:900;font-size:var(--t-s);text-decoration:none;background:var(--ink);color:var(--paper);transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-small{min-height:44px;padding:0 20px;font-size:var(--t-xs);background:var(--lime);color:var(--ink)}
.btn-light{background:var(--paper);color:var(--green)}
.btn-lime{background:var(--lime);color:var(--ink)}

/* Campos */
.field{position:relative;padding:clamp(96px,11vw,150px) var(--m);overflow:hidden}
.f-green{background:var(--green);color:var(--paper)}
.f-paper{background:var(--paper)}
.f-paper2{background:var(--paper2)}
.f-sea{background:var(--sea);color:var(--paper)}
.f-sky{background:var(--sky)}
.f-ochre{background:var(--ochre)}
.f-leaf{background:var(--leaf)}
.f-ink{background:var(--ink);color:var(--paper)}
.f-deep{background:var(--deep);color:var(--paper)}
.h-sec{font-size:var(--t-l)}

/* Interfaz de la app: un marco claro, sin sombra */
[data-ui]{background:var(--paper);border-radius:var(--r);padding:10px;overflow:hidden}
[data-ui] img{width:100%;border-radius:calc(var(--r) - 10px)}

/* Portada */
.hero{min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;column-gap:16px;padding-top:max(104px,13vh);padding-bottom:40px}
.hero-name{grid-column:1/8;grid-row:1;font-size:var(--t-xl);line-height:.84;letter-spacing:-.05em;z-index:2}
.hero-name .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-name .line>span{display:inline-block}
.hero-name .ink2{color:var(--lime)}
.hero-side{grid-column:1/7;grid-row:3;max-width:40ch;display:grid;gap:20px;justify-items:start;z-index:2}
.hero-count{font-size:var(--t-m);font-weight:900;line-height:1.1;letter-spacing:-.02em;color:var(--lime)}
.hero-app{grid-column:9/13;grid-row:1/4;align-self:center;justify-self:end;width:100%;max-width:400px;border-radius:44px;padding:12px;transform:rotate(2deg)}
.hero-app img{border-radius:34px;aspect-ratio:780/1580;object-fit:cover;object-position:top}
@keyframes breathe{50%{transform:scale(1,1.018)}}

/* Beneficios: un mismo sistema en los cuatro campos.
   La copia (título + texto) es un bloque; al otro lado, la pantalla y la mascota
   se apoyan en una misma línea de suelo, sin taparse. "flip" invierte los lados. */
.chapter{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;row-gap:56px}
.ch-copy{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;align-items:end}
.ch-phrase{grid-column:1/8;font-size:var(--t-l);line-height:.95;letter-spacing:-.04em}
.ch-text{grid-column:8/13;font-size:var(--t-m);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.ch-copy .btn{grid-column:8/13;justify-self:start;margin-top:24px}
.ch-stage{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,3vw,48px)}
.flip .ch-stage{flex-direction:row-reverse}
.ch-stage>[data-ui]{flex:1 1 auto;min-width:0;max-width:1040px}
.ch-pet{flex:0 0 auto;width:clamp(180px,22vw,320px);animation:breathe 4.5s ease-in-out infinite;transform-origin:50% 100%}
.f-sea .btn{background:var(--lime);color:var(--ink)}

/* Globo de la pista: la mascota habla, la cola apunta hacia ella */
.bubble{position:relative;overflow:visible;padding:40px 44px;color:var(--ink);margin-bottom:56px}
.bubble::after{content:"";position:absolute;right:-18px;bottom:40px;width:36px;height:36px;background:var(--paper);clip-path:polygon(0 0,100% 50%,0 100%)}
.bubble-q{font-size:var(--t-m);font-weight:900;line-height:1.2;letter-spacing:-.015em}
.bubble-hint{margin-top:24px;padding:20px 24px;border-radius:18px;background:var(--paper2)}

/* Biblioteca: el buscador vive dentro de la pantalla */
.lib{padding:28px;color:var(--ink)}
.lib-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.lib-title{font-size:var(--t-m);font-weight:900;letter-spacing:-.02em}
.lib-form{display:flex;flex-wrap:wrap;gap:8px}
.lib-form select{appearance:none;min-height:48px;max-width:100%;padding:0 44px 0 18px;border:0;border-radius:999px;background:var(--paper2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231d2e27' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 18px center;color:var(--ink);font:700 var(--t-xs) Nunito,sans-serif;cursor:pointer}
.lib-form select:hover{background-color:#d9e6cb}
.lib-count{margin:24px 0 16px;font-weight:700}
.lib-count b{font-size:var(--t-m);color:var(--green);margin-right:4px}
.lib-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.yr{display:grid;gap:2px;padding:16px;border-radius:18px;background:var(--paper2);transition:transform .2s var(--ease),background .2s}
.yr:hover{transform:translateY(-2px);background:#d9e6cb}
.yr span{justify-self:start;padding:2px 10px;border-radius:999px;background:var(--green);color:var(--paper);font-size:var(--t-xs);font-weight:900}
.yr b{margin-top:8px;font-size:var(--t-m);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.yr small{font-size:var(--t-xs)}

/* Para quién es */
.who{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;row-gap:48px}
.who-h{grid-column:1/-1}
.who-list{grid-column:1/-1;display:grid;gap:10px}
.who-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;align-items:center;background:var(--paper2);border-radius:var(--r);padding:20px 28px;transition:background .25s}
.who-row:hover{background:#d9e6cb}
.who-row img{grid-column:1/3;width:100%;max-width:150px}
.who-row h3{grid-column:3/8;font-size:var(--t-m);line-height:1.05}
.who-row p{grid-column:8/13;max-width:44ch}
.who-row a{font-weight:900;color:var(--green)}

/* El nombre */
.name{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;row-gap:56px}
.name .h-sec{grid-column:1/-1}
.entries{grid-column:1/7;display:grid;gap:48px;align-content:center}
.word{font-size:var(--t-l);font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--green)}
.gloss{margin-top:16px;max-width:38ch}
.name-fig{grid-column:7/13;display:flex;flex-direction:column}
.crop{flex:1;min-height:360px;overflow:hidden;border-radius:var(--r)}
.name-fig img{width:100%;height:100%;object-fit:cover;object-position:44% 52%;transform:scale(1.5);transition:transform 1.2s var(--ease)}
.name-fig figcaption{margin-top:14px;font-size:var(--t-xs);max-width:44ch}

/* Preguntas */
.faq{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;row-gap:48px;align-items:start}
.faq-h{grid-column:1/-1}
.faq-pet{grid-column:1/4;grid-row:2;position:sticky;top:48px;width:100%;max-width:300px}
.faq-list{grid-column:4/13;grid-row:2;display:grid;gap:8px}
.faq details{background:var(--paper2);border-radius:var(--r);transition:background .25s}
.faq summary{list-style:none;cursor:pointer;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;font-weight:900;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font-size:var(--t-m);line-height:1;font-weight:900}
.faq details[open]{background:var(--lime)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--green)}
.faq details p{padding:0 28px 26px;max-width:56ch}

/* Pie: el cierre y la acción en un solo lugar */
.foot{min-height:84svh;display:flex;flex-direction:column;padding-top:40px;padding-bottom:28px}
.foot-top{display:flex;gap:32px;font-size:var(--t-xs)}
.foot-top a{margin-left:auto}
.foot-h{margin-top:auto;font-size:var(--t-m);color:var(--lime)}
.foot-lead{margin-top:16px;max-width:52ch}
.foot-lead a{font-weight:900}
.foot-cta{display:inline-flex;align-items:center;gap:.2em;align-self:flex-start;margin-top:24px;font-size:var(--t-xl);font-weight:900;line-height:.95;letter-spacing:-.05em;text-decoration:none;color:var(--paper);transition:color .2s}
.foot-cta svg{width:.5em;height:.5em;transition:transform .3s var(--ease)}
.foot-cta:hover{color:var(--lime)}
.foot-cta:hover svg{transform:translate(.08em,-.08em)}
.foot-meta{display:grid;grid-template-columns:1fr 2fr 1fr;gap:24px;margin-top:48px;font-size:var(--t-xs)}
.foot-meta p:last-child{text-align:right}

/* Entradas */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .hero-name .line>span{transform:translateY(105%);transition:transform .9s var(--ease)}
.js .hero-name .line+.line>span{transition-delay:.11s}
.js.loaded .hero-name .line>span{transform:none}
.js .hero-side,.js .hero-app{opacity:0;transition:opacity .7s var(--ease) .5s,transform .9s var(--ease) .5s}
.js .hero-side{transform:translateY(16px)}
.js .hero-app{transform:translateY(40px) rotate(2deg)}
.js.loaded .hero-side{opacity:1;transform:none}
.js.loaded .hero-app{opacity:1;transform:rotate(2deg)}

@media (max-width:600px){.bar nav{display:none}.bar .btn-small{margin-left:auto}}
@media (max-width:900px){
  :root{--t-l:12vw;--t-m:24px;--t-s:17px}
  .hide-sm{display:none}
  .bar{gap:16px}
  .bar nav{gap:16px}
  .hero{display:flex;flex-direction:column;padding-top:104px;padding-bottom:40px;min-height:auto}
  .hero-name{font-size:19vw}
  .hero-side{margin-top:28px;max-width:none}
  .hero-app{width:72%;margin:40px auto 0;border-radius:36px}
  .hero-app img{border-radius:28px}
  .name,.faq,.who{display:flex;flex-direction:column}
  .name{gap:40px}
  .crop{min-height:0;aspect-ratio:4/3}
  .chapter{display:flex;flex-direction:column;gap:32px;padding-top:72px;padding-bottom:56px}
  .ch-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
  .ch-copy .btn{margin-top:4px}
  .ch-stage,.flip .ch-stage{flex-direction:column;align-items:stretch;gap:0}
  .ch-pet{order:2;align-self:flex-end;width:40vw;max-width:180px;margin-top:16px}
  .flip .ch-pet{align-self:flex-start}
  .bubble{margin-bottom:0;padding:24px}
  .bubble::after{right:48px;bottom:-18px;clip-path:polygon(0 0,100% 0,50% 100%)}
  .lib{padding:20px}
  .lib-form,.lib-form select{width:100%}
  .lib-grid{grid-template-columns:repeat(2,1fr)}
  .who{gap:28px}
  .who-row{grid-template-columns:96px 1fr;gap:4px 16px;padding:18px 20px}
  .who-row img{grid-column:1;grid-row:1/3;max-width:96px}
  .who-row h3{grid-column:2}
  .who-row p{grid-column:1/-1;margin-top:12px;max-width:none}
  .faq{gap:28px}
  .faq-pet{display:none}
  .faq summary{min-height:64px;padding:16px 20px}
  .faq details p{padding:0 20px 20px}
  .foot{min-height:auto}
  .foot-h{margin-top:96px}
  .foot-top{flex-direction:column;gap:8px}
  .foot-top a{margin-left:0}
  .foot-cta{font-size:15vw}
  .foot-meta{grid-template-columns:1fr;gap:10px}
  .foot-meta p:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv,.js .hero-side,.js .hero-name .line>span{opacity:1!important;transform:none!important}
  .js .hero-app{opacity:1!important;transform:rotate(2deg)!important}
  html{scroll-behavior:auto}
}