/* Wana · Prestadores (/proveedores).
 * Design tokens del design system de Wana Servicios + estilos de la landing.
 * La tipografía es Nunito (Google Fonts): pisa la Acumin del design system. */

/* Wana Pet — Color tokens
 * Paleta principal + colores de apoyo (manual de marca 1.0)
 */
:root {
  /* ----- Base palette ----- */
  --wana-orange:      #F65A00; /* Naranja Wana — primary */
  --wana-orange-600:  #D94E00; /* hover/press darker */
  --wana-orange-300:  #FF8A3D; /* tints */
  --wana-petrol:      #0E2B31; /* Azul petróleo — ink / dark surfaces */
  --wana-petrol-800:  #16383F;
  --wana-petrol-600:  #34555C;
  --wana-cream:       #F4EDE3; /* Crema cálido — page background */
  --wana-cream-200:   #FBF7F0; /* lighter card cream */
  --wana-paper:       #FFFFFF;

  /* ----- Support palette (ordenar audiencias, never compete with orange) ----- */
  --wana-green:  #4C6B3F;
  --wana-yellow: #E9A826;
  --wana-blue:   #3E6E92;
  --wana-red:    #C13B2C;

  /* ----- Neutrals derived from petrol ----- */
  --wana-ink:        #0E2B31;
  --wana-ink-70:     rgba(14,43,49,.70);
  --wana-ink-55:     rgba(14,43,49,.55);
  --wana-ink-35:     rgba(14,43,49,.35);
  --wana-ink-15:     rgba(14,43,49,.15);
  --wana-ink-08:     rgba(14,43,49,.08);
  --wana-line:       rgba(14,43,49,.14);

  /* ----- Semantic aliases ----- */
  --color-bg:            var(--wana-cream);
  --color-surface:       var(--wana-paper);
  --color-surface-cream: var(--wana-cream-200);
  --color-surface-dark:  var(--wana-petrol);
  --color-brand:         var(--wana-orange);
  --color-brand-ink:     var(--wana-petrol);

  --text-strong:   var(--wana-petrol);
  --text-body:     var(--wana-ink-70);
  --text-muted:    var(--wana-ink-55);
  --text-on-dark:  var(--wana-cream);
  --text-on-brand: var(--wana-petrol);

  --border-subtle: var(--wana-line);
  --border-strong: var(--wana-petrol);

  --state-success: var(--wana-green);
  --state-warning: var(--wana-yellow);
  --state-info:    var(--wana-blue);
  --state-danger:  var(--wana-red);
}

/* Wana — Typography tokens
 * Single brand family: Acumin Variable (Adobe).
 * Display: Acumin heavy (800–900), condensed width, ALL-CAPS titulares.
 * Text/UI: Acumin 400–700, normal width.
 */
:root {
  --font-display: 'Acumin Variable', 'Arial Narrow', sans-serif;
  --font-text:    'Acumin Variable', system-ui, -apple-system, sans-serif;

  /* Display sizes — heavy + condensed, tight leading, uppercase.
     Acumin's weight axis responds to the font-weight PROPERTY; the width axis
     responds to font-variation-settings. So apply BOTH:
        font: var(--display-1);  font-variation-settings: var(--vfs-condensed);
     (declare font-variation-settings AFTER the `font` shorthand). */
  --display-1: 900 clamp(3.5rem, 8vw, 6.5rem)/0.88 var(--font-display);
  --display-2: 900 clamp(2.6rem, 5.5vw, 4.25rem)/0.9 var(--font-display);
  --display-3: 800 clamp(2rem, 4vw, 3rem)/0.92 var(--font-display);

  /* Width-axis presets (font-variation-settings) */
  --vfs-condensed: 'wdth' 55;   /* @kind font */   /* titulares — most condensed */
  --vfs-semicond:  'wdth' 75;   /* @kind font */   /* short, important text (buttons, eyebrows, stats) */

  /* Headings (text face) */
  --h1: 800 2rem/1.1 var(--font-text);
  --h2: 700 1.5rem/1.15 var(--font-text);
  --h3: 700 1.175rem/1.25 var(--font-text);

  /* Body */
  --body-lg: 400 1.125rem/1.55 var(--font-text);
  --body:    400 1rem/1.55 var(--font-text);
  --body-sm: 400 0.875rem/1.5 var(--font-text);

  /* Labels / eyebrows / data */
  --label:   700 0.8125rem/1.2 var(--font-text);
  --eyebrow: 700 0.75rem/1.2 var(--font-text);  /* uppercase + tracking */
  --caption: 500 0.75rem/1.4 var(--font-text);

  /* Tracking */
  --track-display: -0.005em;
  --track-eyebrow: 0.14em;
  --track-label:   0.02em;
}

/* Wana Pet — Spacing, radius, shadow, motion tokens */
:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius — soft, friendly, never pill-everything. Cards are gently rounded. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows — subtle, warm-tinted, low elevation. The brand is flat-leaning. */
  --shadow-xs: 0 1px 2px rgba(14,43,49,.06);
  --shadow-sm: 0 2px 8px rgba(14,43,49,.07);
  --shadow-md: 0 8px 24px rgba(14,43,49,.10);
  --shadow-lg: 0 18px 48px rgba(14,43,49,.14);
  --shadow-brand: 0 10px 24px rgba(246,90,0,.28);

  /* Motion — quick, confident, no bounce */
  --ease-out: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Layout */
  --container: 1200px;
  --container-narrow: 720px;
}

/* Wana — Base element styles & helpers (optional, lightweight) */

/* Acumin Variable carries a slant ('slnt') axis. The supplied OTF pins it to 0
 * (upright), but some engines (CoreText/Safari) can still synthesize oblique.
 * Never allow synthetic slanting of the brand face. */
html, body { font-synthesis: none; }
* { font-style: normal; }

/* Acumin is a variable font: the WIDTH axis only responds to
 * font-variation-settings (the weight axis responds to font-weight). The `font`
 * shorthand resets variation-settings to normal, so to keep ALL display-face
 * text condensed (titulares + short important text) we force the width axis with
 * !important wherever the display token/family is used inline or via a class.
 * Weight stays controlled by each element's font-weight (800–900). */
[style*="--display-"],
[style*="--font-display"],
.wana-display {
  font-variation-settings: var(--vfs-condensed) !important;
}

.wana-eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--wana-orange);
}

.wana-display {
  font: var(--display-2);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

/* Dotted divider used throughout the manual */
.wana-divider-dotted {
  border: 0;
  border-top: 2px dotted var(--wana-orange);
  opacity: .9;
  margin: var(--space-6) 0;
}
.wana-divider-line {
  border: 0;
  border-top: 2px solid var(--wana-orange);
  margin: var(--space-6) 0;
}

/* Brand asterisk helper (background mask, recolorable via currentColor bg) */
.wana-asterisk {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--wana-asterisk-mask) center/contain no-repeat;
          mask: var(--wana-asterisk-mask) center/contain no-repeat;
}

/* ---------- Landing ---------- */
/* Tipografía de marca: Nunito en toda la página (reemplaza Acumin del design system) */
:root{
  --font-display:'Nunito', system-ui, -apple-system, sans-serif;
  --font-text:'Nunito', system-ui, -apple-system, sans-serif;
  --display-2:900 clamp(2.4rem, 5.2vw, 4.1rem)/1.01 var(--font-display);
  --display-3:900 clamp(1.9rem, 3.8vw, 2.95rem)/1.04 var(--font-display);
  --track-display:-0.01em;
}
html{scroll-behavior:smooth;}
.wana-br-m{display:none;}
html,body{margin:0;background:var(--wana-cream);}
section[id]{scroll-margin-top:84px;}
.wana-link{color:rgba(244,237,227,.78);text-decoration:none;font:var(--body-sm);transition:color var(--dur) var(--ease-out);}
.wana-link:hover{color:var(--wana-orange);}
.wana-card-hover{transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.wana-card-hover:hover{border-color:var(--wana-orange)!important;transform:translateY(-3px);box-shadow:var(--shadow-md);}
.wana-chip{display:inline-flex;align-items:center;gap:7px;background:var(--wana-paper);border:1px solid var(--border-subtle);border-radius:999px;padding:8px 14px;font:var(--body-sm);color:var(--text-body);}
.wana-chip i,.wana-chip svg{color:var(--wana-orange);flex:none;}
.wana-chip-sm{display:inline-flex;align-items:center;background:var(--wana-cream);border:1px solid var(--border-subtle);border-radius:999px;padding:5px 11px;font:var(--caption);color:var(--text-body);}
.wana-chips{display:flex;flex-wrap:wrap;gap:10px;}
.wana-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--wana-orange);border:2px solid var(--wana-orange);border-radius:var(--radius-md);padding:17px 28px;font:700 16px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--wana-petrol);text-decoration:none;cursor:pointer;box-shadow:var(--shadow-brand);}
.wana-btn-sm{padding:11px 18px;font-size:13px;box-shadow:none;}
.wana-btn-dark{background:var(--wana-petrol);border-color:var(--wana-petrol);color:var(--wana-cream);box-shadow:none;}
@keyframes wanaMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:768px){
  #site-header>div{padding:12px 16px!important;}
  #hero>div{padding:28px 16px 44px!important;}
  #how-it-works,#cuidado,#salud,#bienestar,#benefits-features,#activity-overview,#faq{padding:48px 0!important;}
  #how-it-works>div,#cuidado>div,#salud>div,#bienestar>div,#benefits-features>div,#activity-overview>div,#faq>div,#footer>div,#final-cta>div{padding-left:16px!important;padding-right:16px!important;}
  #final-cta{padding:60px 0!important;}
  #hero h1,#final-cta h2{font-size:clamp(30px,8.8vw,64px)!important;}
  .wana-hero-grid{grid-template-columns:1fr!important;gap:28px!important;}
  .wana-grid-3,.wana-grid-2,.wana-grid-4,.wana-selector,.wana-card-row{grid-template-columns:1fr!important;}
  .wana-card-row>div:last-child{padding:16px 18px 20px!important;gap:10px!important;}
  .wana-stats-row{gap:18px!important;}
  .wana-steps-flex{flex-direction:column!important;}
  .wana-step-arrow{display:none!important;}
  /* Cards deslizables en horizontal (bloques 02 y 03) */
  .wana-hscroll{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px!important;margin:0 -16px;padding:4px 16px 12px;scroll-padding-left:16px;scrollbar-width:none;}
  .wana-hscroll::-webkit-scrollbar{display:none;}
  .wana-hscroll>*{flex:0 0 80%;scroll-snap-align:start;}
  /* Cards con foto (bloques 02 y 03), más compactas en mobile */
  .wana-hscroll>*{flex-basis:66%!important;}
  .wana-hscroll>*>div:first-child{aspect-ratio:4/3!important;}
  .wana-hscroll>*>div:last-child{margin-top:-16px!important;padding:14px 16px 18px!important;gap:6px!important;}
  .wana-hscroll>*>div:last-child>p:first-child{font-size:10px!important;}
  .wana-hscroll h3{font-size:15px!important;line-height:1.25!important;}
  .wana-hscroll>*>div:last-child>p:last-child{font-size:12.5px!important;line-height:1.45!important;}
  /* Chips de los bloques 02 y 03, compactos en mobile */
  #cuidado .wana-chips,#salud .wana-chips{gap:6px!important;margin-top:20px!important;}
  #cuidado .wana-chip,#salud .wana-chip{padding:5px 10px;gap:5px;font-size:11.5px;line-height:1.3;}
  #cuidado .wana-chip svg,#salud .wana-chip svg{width:12px;height:12px;}
  /* Título del bloque 03 en tres líneas fijas */
  .wana-br-m{display:inline;}
  .wana-title-vet{font-size:min(34px, calc((100vw - 32px) / 12.4))!important;}
  .wana-title-vet>span{white-space:nowrap;}
  /* Recuadro "Validamos la matrícula", compacto en mobile */
  .wana-matricula{margin-top:24px!important;padding:18px!important;gap:14px!important;flex-wrap:nowrap!important;}
  .wana-matricula>span{width:38px!important;height:38px!important;}
  .wana-matricula>span svg{width:19px;height:19px;}
  .wana-matricula>div{min-width:0!important;}
  .wana-matricula h3{font-size:17px!important;margin-bottom:6px!important;}
  .wana-matricula p{font-size:13.5px!important;line-height:1.45!important;}
  /* Card de peluquería, más compacta en mobile */
  .wana-card-row>div:first-child{aspect-ratio:16/10!important;}
  .wana-card-row h3{font-size:17px!important;}
  .wana-card-row .wana-chips{gap:6px!important;}
  .wana-card-row .wana-chip{padding:6px 11px;font-size:12px;}
  .wana-card-row .wana-chip svg{width:14px;height:14px;}
  .wana-vs-flex{flex-direction:column!important;}
  .wana-vs-mid{display:none!important;}
  .wana-footer-cols{flex-direction:row!important;flex-wrap:wrap!important;gap:28px 14px!important;}
  .wana-footer-cols>div:first-child{flex:0 0 100%;max-width:none!important;}
  .wana-footer-cols>div:not(:first-child){flex:1 1 0;min-width:0;}
  .wana-footer-cols .wana-link{font-size:13px;line-height:1.35;}
}

/* FAQ: acordeón, una pregunta abierta a la vez (ver app.js) */
.wana-faq-item{border:2px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;background:var(--wana-paper);}
.wana-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:var(--wana-paper);border:none;text-align:left;cursor:pointer;min-height:56px;}
.wana-faq-q-text{font:600 16px/1.35 var(--font-text);color:var(--text-strong);}
.wana-faq-chev{color:var(--text-muted);display:inline-flex;flex:none;}
.wana-faq-chev svg{transition:transform .2s;}
.wana-faq-a{display:none;padding:18px 20px;background:var(--wana-paper);border-top:1px solid var(--border-subtle);}
.wana-faq-a p{font:var(--body-sm);color:var(--text-body);margin:0;}
.wana-faq-item.is-open{border-color:var(--wana-petrol);}
.wana-faq-item.is-open .wana-faq-q{background:var(--wana-petrol);}
.wana-faq-item.is-open .wana-faq-q-text{color:var(--wana-cream);}
.wana-faq-item.is-open .wana-faq-chev{color:var(--wana-orange);}
.wana-faq-item.is-open .wana-faq-chev svg{transform:rotate(180deg);}
.wana-faq-item.is-open .wana-faq-a{display:block;}