/* ==========================================================================
   Wavais · componentes
   Forma, layout y color base CLARO de todos los componentes compartidos.
   El acento de marca (degradado violeta → naranja) NO se decide aquí:
   vive en css/palette.css, que se carga la última. Ver la cabecera de ese
   archivo para el reparto de los puntos de impacto.
   ========================================================================== */

/* --- Cabecera y navegación ------------------------------------------- */
.site-header{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;width:min(calc(100% - 3rem),var(--max));min-height:112px;margin:auto;padding:2.25rem 0}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.75rem;letter-spacing:-.05em}
.brand sup{font-family:var(--body);font-size:.42rem;letter-spacing:0;align-self:flex-start;margin-top:.1rem}
/* Solo la caja del logo. La imagen la pone palette.css (punto de impacto 1).
   La proporción 2.35:3.1 respeta el viewBox 100x132 de img/logo.svg, para
   que la gota no se deforme. flex:none evita que el flex del .brand lo encoja. */
.brand-mark{display:block;flex:none;width:2.35rem;height:3.1rem}
.main-nav{display:flex;align-items:center;gap:2.65rem;font-size:1rem;font-weight:800}
.main-nav a{transition:opacity .2s}
.main-nav a:hover{opacity:.55}
/* El fondo del CTA lo pone palette.css (punto de impacto 2). */
.nav-cta{display:flex;align-items:center;gap:.6rem;padding:1rem 1.45rem;border:1px solid transparent;border-radius:999px;font-size:1rem}
.nav-cta:hover{opacity:1}
.nav-cta span{font-size:1.2rem}
.menu-toggle{display:none;background:none;color:var(--ink);font-size:.75rem;font-weight:800}

/* --- Botones y enlaces ------------------------------------------------ */
.button{display:inline-flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;border:1px solid transparent;border-radius:999px;font-size:.78rem;font-weight:850;transition:transform .25s var(--ease),background .25s}
.button:hover{transform:translateY(-3px)}
.button span{font-size:1.05rem}
/* .button-primary: fondo en palette.css (punto de impacto 2). */
.button-dark{background:var(--ink);color:var(--paper)}
/* Color explicito: si se hereda, dentro de .service-copy sale gris con la
   raya oscura. Sobre fondo oscuro lo reescribe seo.css. */
.text-link{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);font-size:.76rem;font-weight:850;border-bottom:1px solid var(--ink);padding-bottom:.25rem}
.text-link span{font-size:1rem}

/* --- Hero ------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;min-height:740px;padding-top:4rem;padding-bottom:7rem}
.hero-lede{max-width:450px;color:var(--muted);font-size:1.05rem}
.hero-actions{display:flex;align-items:center;gap:1.4rem;margin:2rem 0 3rem}
.hero-proof{display:flex;align-items:center;gap:1rem;color:var(--muted);font-size:.7rem;line-height:1.25}
.hero-proof strong{color:var(--ink)}
.proof-avatars{display:flex}
.proof-avatars i{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-left:-.45rem;border:2px solid var(--paper);border-radius:50%;background:var(--violet);color:var(--white);font-style:normal;font-size:.62rem;font-weight:900}
.proof-avatars i:first-child{margin-left:0;background:var(--fire)}
.proof-avatars i:last-child{background:var(--violet-bright)}
.hero-visual{position:relative;min-height:550px}

/* --- Mockup de móvil --------------------------------------------------
   Único lugar donde se conserva el oscuro: es una pantalla de teléfono.
   Violeta oscuro de marca, no el verde de la paleta anterior. */
.phone-wrap{position:absolute;inset:0 4% -1rem 14%;display:grid;place-items:center;transform:rotate(7deg)}
.phone,.demo-phone{position:relative;width:min(320px,82%);padding:.7rem;border:5px solid var(--violet-deep);border-radius:2.3rem;background:var(--violet-deepest);box-shadow:0 25px 65px rgba(49,15,91,.28)}
.phone:after,.demo-phone:after{content:'';position:absolute;inset:1.1rem;border-radius:1.6rem;background:linear-gradient(135deg,#321550,var(--violet-deepest));z-index:0}
.phone>*,.demo-phone>*{position:relative;z-index:1}
.phone-notch{position:absolute;top:.55rem;left:50%;width:38%;height:1.15rem;transform:translateX(-50%);border-radius:0 0 1rem 1rem;background:var(--violet-deepest)}
.chat-header{display:flex;align-items:center;gap:.45rem;padding:1.1rem .65rem .85rem;color:var(--on-dark-strong);font-size:.65rem}
.chat-header strong,.chat-header small{display:block}
.chat-header small{color:var(--on-dark-muted);font-size:.5rem;margin-top:.1rem}
.back,.dots{font-size:1.5rem}
.dots{margin-left:auto;letter-spacing:.04em}
.chat-avatar{display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--violet-bright);color:var(--white);font-family:Georgia,serif;font-weight:700;font-size:1rem}
.chat-body{display:flex;flex-direction:column;gap:.55rem;min-height:320px;padding:.75rem .45rem;font-size:.57rem}
.chat-date{align-self:center;color:var(--on-dark-muted);font-size:.45rem;letter-spacing:.1em}
.bubble{max-width:84%;padding:.65rem .7rem;border-radius:.8rem;line-height:1.35}
.bubble-in{align-self:flex-start;border-bottom-left-radius:.15rem;background:var(--dark-raised);color:var(--on-dark-strong)}
.bubble-out{align-self:flex-end;border-bottom-right-radius:.15rem;background:var(--violet-bright);color:var(--white)}
.booking-options{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.booking-options button{padding:.4rem .65rem;border:1px solid rgba(255,178,41,.55);border-radius:999px;background:transparent;color:var(--fire-bright);font-size:.5rem}
.typing{align-self:flex-start;display:flex;gap:.2rem;padding:.55rem .65rem;border-radius:.8rem;background:var(--dark-raised)}
.typing span{width:.25rem;height:.25rem;border-radius:50%;background:var(--on-dark-muted);animation:blink 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
.chat-input{display:flex;justify-content:space-between;align-items:center;margin:.25rem .15rem;padding:.65rem .75rem;border-radius:999px;background:var(--dark-raised);color:var(--on-dark-muted);font-size:.52rem}
.chat-input b{color:var(--fire-bright);font-size:.85rem}

/* --- Orbes y tarjetas flotantes del hero ------------------------------ */
.orb{position:absolute;border-radius:50%;filter:blur(1px)}
.orb-one{inset:8% 10% 25% 27%;background:radial-gradient(circle at 35% 30%,rgba(224,190,255,.95),rgba(149,92,240,.25) 45%,transparent 70%);opacity:.85}
.orb-two{inset:47% 2% 8% 55%;background:radial-gradient(circle at 50% 50%,rgba(255,178,41,.95),rgba(255,138,0,.16) 60%,transparent 72%);opacity:.7}
.visual-label{position:absolute;z-index:2;font-size:.62rem;font-weight:900;letter-spacing:.12em}
.label-top{top:6%;right:8%}
.label-top span{color:var(--fire);margin-left:.35rem}
.visual-card{position:absolute;z-index:3;display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border:1px solid rgba(255,255,255,.65);border-radius:1rem;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);box-shadow:0 15px 30px rgba(71,28,125,.12);font-size:.65rem;font-weight:800}
.visual-card small{display:block;color:var(--muted);font-size:.45rem;letter-spacing:.11em}
.visual-card strong{display:block}
.card-result{top:29%;left:0}
.card-icon{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:.55rem;background:var(--ink);color:var(--fire-bright);font-size:1.2rem}
.card-location{right:0;bottom:15%;color:var(--ink)}
.location-pin{display:grid;place-items:center;width:1.8rem;height:1.8rem;border:1px solid var(--ink);border-radius:50%;font-size:1.3rem}

/* --- Ticker: banda violeta plana, respiro entre secciones claras ------ */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:var(--violet);color:var(--on-brand);white-space:nowrap}
.ticker-track{display:flex;justify-content:space-around;align-items:center;gap:3rem;padding:1rem 2rem;font-family:var(--display);font-size:.8rem;letter-spacing:.05em;animation:ticker 22s linear infinite}
.ticker b{color:var(--fire-bright);font-size:1.2rem}

/* --- Proceso ---------------------------------------------------------- */
.process{display:grid;grid-template-columns:.9fr 1.3fr;gap:5rem;align-items:start}
.process-intro h2{margin-bottom:2.5rem}
.process-steps{position:relative;display:grid;gap:1.7rem;padding-top:1rem}
.process-line{position:absolute;top:2.3rem;bottom:2.2rem;left:1.4rem;width:1px;background:var(--line)}
.process-step{position:relative;display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;padding:0 0 1.7rem 0}
.process-step>span{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--ink);background:var(--paper);font-size:.62rem;font-weight:900}
.process-step h3{align-self:center;font-size:var(--fs-card-sm);margin:0}
.process-step p{grid-column:2;max-width:380px;margin:.7rem 0 0;color:var(--muted);font-size:.9rem}

/* --- Demo: sección clara, escenario oscuro -----------------------------
   El bloque ya no es una franja negra a media página: solo el escenario
   del móvil conserva el violeta oscuro, para que el mockup contraste. */
.demo-section{display:grid;grid-template-columns:.8fr 1.2fr;min-height:670px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card);overflow:hidden}
.demo-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:5rem 4rem}
.demo-copy .eyebrow{color:var(--muted)}
.demo-copy .eyebrow span{border-color:var(--line)}
.demo-copy p:not(.eyebrow){max-width:360px;color:var(--muted)}
.demo-stage{position:relative;min-height:600px;background:radial-gradient(circle at 48% 40%,#7835c7,transparent 48%),var(--violet-deepest);overflow:hidden}
.stage-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(190,146,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(190,146,255,.14) 1px,transparent 1px);background-size:42px 42px;transform:perspective(400px) rotateX(60deg) scale(1.6);transform-origin:center bottom;opacity:.7}
/* Es la demostración del producto: el móvil va centrado y a tamaño legible. */
.phone-small{position:absolute;top:8%;left:50%;width:min(390px,78%);transform:translateX(-50%) rotate(6deg);box-shadow:0 30px 70px rgba(24,10,43,.5)}
.mini-head{display:flex;align-items:center;gap:.6rem;padding:1.3rem .7rem 1rem;color:var(--on-dark-strong);font-size:.86rem}
.mini-head b{margin-left:auto;color:var(--on-dark-muted)}
.mini-message{position:relative;z-index:1;width:82%;margin:.5rem .45rem;padding:.8rem .9rem;border-radius:.95rem;font-size:.84rem;line-height:1.35}
.incoming{background:var(--dark-raised);color:var(--on-dark-strong);border-bottom-left-radius:.2rem}
.outgoing{margin-left:auto;background:var(--violet-bright);color:var(--white);border-bottom-right-radius:.2rem}
.mini-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.5rem;padding:.9rem .45rem 1.1rem;font-size:.74rem}
.mini-actions button{padding:.6rem .95rem;border-radius:999px;background:transparent;border:1px solid rgba(255,178,41,.55);color:var(--fire-bright)}
.stage-tag{position:absolute;z-index:2;padding:.75rem;border:1px solid var(--on-brand-line);border-radius:.8rem;color:var(--fire-bright);font-size:.5rem;letter-spacing:.1em;line-height:1.3}
.stage-tag strong{color:var(--on-dark-strong)}
.tag-a{top:18%;right:7%}
.tag-b{bottom:19%;left:8%;color:var(--violet-bright)}

/* --- Mapa de crecimiento local ---------------------------------------- */
.local-growth{display:grid;grid-template-columns:1.1fr .9fr;gap:6rem;align-items:center}
.growth-map{position:relative;min-height:370px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-alt);overflow:hidden}
.growth-map svg{position:absolute;inset:0;width:100%;height:100%}
.growth-map path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 8}
.map-node{position:absolute;z-index:2;width:1rem;height:1rem;border:3px solid var(--paper);border-radius:50%;background:var(--ink);box-shadow:0 0 0 .45rem rgba(71,28,125,.14)}
.node-one{left:18%;top:57%}
.node-two{left:53%;top:40%;background:var(--fire)}
.node-three{right:11%;top:18%;background:var(--violet)}
.map-label{position:absolute;z-index:3;font-size:.61rem;font-weight:900;letter-spacing:.1em}
.map-label b{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;margin-left:.3rem;border:1px solid var(--ink);border-radius:50%;font-size:.5rem}
.map-benidorm{left:8%;top:66%}
.map-alicante{left:48%;top:50%}
.map-madrid{right:5%;top:8%}
.growth-copy>p:not(.eyebrow){max-width:390px;color:var(--muted)}
.growth-list{display:grid;gap:.7rem;margin-top:2rem}
.growth-list div{display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line)}
.growth-list strong{font-size:.7rem}
.growth-list span{font-weight:850;font-size:.85rem}
.growth-list small{color:var(--muted);font-weight:500;font-size:.7rem}

/* --- Contacto y pie --------------------------------------------------- */
.contact-section{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding:7rem 0;border-top:1px solid var(--line)}
.contact-section>div{max-width:650px}
.contact-section h2{margin-bottom:1rem}
.contact-section p:not(.eyebrow){max-width:390px;color:var(--muted)}
.contact-email{font-family:var(--display);font-size:clamp(1.2rem,2.5vw,2.2rem);letter-spacing:-.08em;border-bottom:2px solid var(--ink);padding-bottom:.35rem}
.contact-email span{font-family:var(--body);font-size:1.2rem}
.site-footer{padding:3rem 0 1.5rem;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:start;padding-bottom:5rem}
.footer-top p{color:var(--muted);font-size:.8rem}
.footer-links{display:flex;justify-content:end;gap:1.5rem;font-size:.75rem;font-weight:800}
.footer-bottom{display:flex;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.65rem}
.footer-bottom a{color:var(--ink);font-weight:800}

/* --- Toast y animaciones de entrada ----------------------------------- */
/* Anclado abajo: se esconde bajando (translateY positivo). Si algún
   breakpoint lo ancla arriba, debe invertir el signo o se queda a la vista.
   pointer-events:none evita que bloquee toques aunque quede mal colocado. */
.toast{position:fixed;z-index:20;right:1rem;bottom:1rem;max-width:245px;padding:1rem 1.2rem;border-radius:1rem;background:var(--ink);color:var(--paper);font-size:.75rem;opacity:.96;box-shadow:var(--shadow);transform:translateY(150%);pointer-events:none;transition:transform .4s var(--ease)}
.toast.is-visible{transform:translateY(0);pointer-events:auto}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}

@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* Cabecera intermedia: la nav completa aún cabe, pero más compacta. */
@media(max-width:900px) and (min-width:651px){
  .site-header{padding:1.8rem 0}
  .brand{font-size:1.55rem}
  .main-nav{gap:1.4rem;font-size:.88rem}
}