/* =========================================================
   MUCHODRAG — landing page
   Token system
   ========================================================= */
:root{
  /* color */
  --ink:        #150A1A;   /* fondo principal, negro escenario */
  --ink-soft:   #1E0F24;
  --curtain:    #2E1033;   /* fondo secciones alternas, telón */
  --curtain-2:  #3B1440;
  --pink:       #FF2E93;   /* foco de luz, rosa neón */
  --pink-dim:   #C71F6F;
  --violet:     #8B3DFF;   /* segundo foco */
  --gold:       #F0C15C;   /* pan de oro, CTA principal */
  --gold-2:     #C98F2E;
  --cream:      #FBF3E7;   /* texto sobre fondo oscuro */
  --cream-dim:  rgba(251,243,231,.68);
  --line:       rgba(251,243,231,.14);

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-utility: "Bebas Neue", var(--font-body);

  /* layout */
  --container: 1180px;
  --radius: 18px;
  --radius-sm: 10px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);

  --ease: cubic-bezier(.22,.68,.32,1);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
p{ margin: 0 0 1em; }
.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }

::selection{ background: var(--pink); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   TYPE HELPERS
   ========================================================= */
.eyebrow{
  font-family: var(--font-utility);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 .9em;
}
.eyebrow-light{ color: var(--gold); }

h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.lead{
  font-size: 1.08rem;
  color: var(--cream-dim);
  max-width: 46ch;
}
.section-head{
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.section-head .lead{ margin-top:.6em; }

.text-link{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-weight:700;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.text-link:hover{ border-color: var(--gold); gap:.65em; }

/* =========================================================
   LAYOUT / SECTIONS
   ========================================================= */
.section{ padding-block: var(--section-pad); }
.section-alt{ background: var(--curtain); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: .95em 1.9em;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(240,193,92,.55);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(240,193,92,.65); }
.btn:disabled,
.btn:disabled:hover{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-outline{
  border: 1.5px solid var(--line);
  color: var(--cream);
  backdrop-filter: blur(2px);
}
.btn-outline:hover{ border-color: var(--pink); color: var(--pink); }
.btn-small{ padding: .6em 1.3em; font-size: .82rem; }
.btn-full{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  opacity:0;
  transition: opacity .3s var(--ease);
}
/* El fondo y el blur van en ::before: un backdrop-filter en el propio header
   lo convierte en contenedor del menú móvil (position:fixed) y lo recorta */
.site-header[data-scrolled="true"]{
  padding-block: .65rem;
  box-shadow: 0 1px 0 var(--line);
}
.site-header[data-scrolled="true"]::before{
  opacity:1;
  background: rgba(21,10,26,.86);
  backdrop-filter: blur(10px);
}
/* Banner dorado de web oficial / reserva directa, pegado arriba del todo
   (el margen negativo anula el padding superior del header). Se pliega al
   hacer scroll, con el mismo data-scrolled que encoge el header. */
.direct-banner{
  display:block;
  margin: -1.1rem 0 1.1rem;
  padding: .5em var(--gutter);
  max-height: 6rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: max-height .3s var(--ease), margin .3s var(--ease), padding .3s var(--ease), opacity .3s var(--ease);
}
.direct-banner:hover{ text-decoration: underline; }
.site-header[data-scrolled="true"] .direct-banner{
  max-height: 0;
  margin: 0;
  padding-block: 0;
  opacity: 0;
  visibility: hidden;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.brand{ display:flex; align-items:center; gap:.55rem; color: var(--cream); }
.brand-mark{ display:flex; }
.brand-mark img{ width:40px; height:40px; }
.brand-text{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand-text em{ font-style: italic; color: var(--pink); font-weight: 500; }

.main-nav{ display:flex; align-items:center; gap: 2rem; }
.main-nav ul{ display:flex; align-items:center; gap: 1.6rem; }
/* Menú de escritorio en tabletas (iPad vertical, 768 px): sin esto «Sobre mí»
   y «En escena» se partían en dos líneas justo encima del menú móvil (760 px). */
@media (min-width: 761px) and (max-width: 900px){
  .main-nav{ gap: 1.2rem; }
  .main-nav ul{ gap: 1.1rem; }
}
.nav-link{
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 600;
  color: var(--cream-dim);
  position: relative;
  padding-block: .2rem;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height: 2px; background: var(--pink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover{ color: var(--cream); }
.nav-link:hover::after{ transform: scaleX(1); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:.4rem;
}
.nav-toggle span{ width:22px; height:2px; background: var(--cream); border-radius:2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding-block: 7rem 4rem;
  --mx: 50%;
  --my: 38%;
}
.hero-photo{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(21,10,26,.55) 0%, rgba(21,10,26,.88) 100%);
}
.hero-photo img.media-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(560px 560px at var(--mx) var(--my), rgba(255,46,147,.35), transparent 60%),
    radial-gradient(720px 720px at 82% 90%, rgba(139,61,255,.25), transparent 65%);
  transition: background-position .2s linear;
  pointer-events:none;
}
.hero-curtain{
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 34px);
  mix-blend-mode: multiply;
  opacity:.55;
  pointer-events:none;
}
.hero-inner{ position:relative; max-width: 760px; }
.hero-title{
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--cream);
}
.hero-title em{ font-style: italic; color: var(--pink); font-weight:500; }
.hero-title .eyebrow{ display:block; font-weight:400; line-height:1.4; } /* la etiqueta va dentro del <h1> por SEO */
.hero-tagline{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 .7em;
}
.hero-tagline em{ font-style: italic; color: var(--pink); font-weight:500; }
.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--cream-dim);
  max-width: 52ch;
  margin-inline:auto;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap: 1rem;
  justify-content:center;
  margin-block: 2.1rem 1.6rem;
}
.hero-rating{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.85rem; color: var(--cream-dim);
}
.stars{ color: var(--gold); letter-spacing:.1em; }

/* =========================================================
   MEDIA PLACEHOLDER SYSTEM
   ========================================================= */
.media{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--violet) 0%, var(--curtain-2) 55%, var(--pink) 130%);
  display:flex; align-items:center; justify-content:center;
}
.media::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.28), transparent 45%);
}
.media::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px);
  opacity:.5;
}
.media-icon{ position:relative; z-index:1; color: rgba(255,255,255,.85); }
.media-label{
  position:absolute; z-index:1; left: 1rem; bottom: .85rem;
  font-family: var(--font-utility);
  font-size: .66rem; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(255,255,255,.75);
}
.media img{
  position:absolute; inset:0;
  z-index:2;
  width:100%; height:100%;
  object-fit:cover;
}
.media[data-tone="b"]{ background: linear-gradient(135deg, var(--pink) 0%, var(--curtain-2) 60%, var(--violet) 130%); }
.media[data-tone="c"]{ background: linear-gradient(135deg, var(--gold-2) 0%, var(--curtain-2) 55%, var(--violet) 130%); }
.media[data-tone="d"]{ background: linear-gradient(135deg, var(--curtain-2) 0%, var(--pink) 70%, var(--gold) 140%); }
.media[data-tone="e"]{ background: linear-gradient(135deg, var(--violet) 0%, var(--pink) 60%, var(--curtain-2) 130%); }
.media[data-tone="f"]{ background: linear-gradient(135deg, var(--gold-2) 0%, var(--pink-dim) 60%, var(--violet) 130%); }

.media-portrait{ aspect-ratio: 3/4; }

/* =========================================================
   SOBRE MÍ
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns: .82fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.about-media{ position:relative; }
.about-stat-card{
  position:absolute; right:-1.1rem; bottom:-1.1rem;
  z-index: 3;
  background: var(--curtain);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
  display:flex; flex-direction:column; align-items:center;
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.6);
}
.about-stat-number{
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  line-height:1;
}
.about-stat-label{
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--cream-dim); margin-top:.3rem;
}

.check-list{ margin: 1.6rem 0; display:flex; flex-direction:column; gap:.75rem; }
.check-list li{
  position:relative;
  padding-left: 1.7rem;
  color: var(--cream-dim);
  font-size:.98rem;
}
.check-list li::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:.9rem; height:.9rem;
  border-radius:50%;
  background: radial-gradient(circle, var(--pink), var(--violet));
}

/* =========================================================
   SHOW CARDS / GRID
   ========================================================= */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.show-card .media{ aspect-ratio: 3 / 2; }
.show-card h3{ font-size: 1.25rem; margin-block: .9rem .35rem; }
.show-card p{ color: var(--cream-dim); font-size:.94rem; }
.show-meta{
  font-family: var(--font-utility);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold); margin-top:.5rem;
}

/* =========================================================
   PERSONA GRID
   ========================================================= */
.persona-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.persona-card{
  background: var(--curtain);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.4rem;
  text-align:center;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.persona-card:hover{ transform: translateY(-4px); border-color: var(--pink); }
.persona-icon{ font-size: 1.9rem; display:block; margin-bottom:.9rem; }
.persona-card p{ margin:0; font-style: italic; font-family: var(--font-display); font-size:1.02rem; color: var(--cream); }

/* =========================================================
   CORPORATE BAND
   ========================================================= */
.corporate-band{
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(255,46,147,.22), transparent 60%),
    linear-gradient(180deg, var(--ink-soft), var(--ink));
  border-block: 1px solid var(--line);
  padding-block: var(--section-pad);
}
.corporate-inner h2{ max-width: 20ch; margin-top:.2em; }
.corporate-inner .lead{ margin-block: 1em 1.8em; }

/* =========================================================
   GALERÍA
   ========================================================= */
.media-feature{
  aspect-ratio: 16/8;
  margin-bottom: 1.4rem;
}
.play-button{
  position:relative; z-index:1;
  width: 4.2rem; height: 4.2rem;
  border-radius:50%;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  backdrop-filter: blur(3px);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.media-feature:hover .play-button{ transform: scale(1.08); background: rgba(255,255,255,.24); }
.gallery-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gallery-strip .media{ aspect-ratio: 1/1; }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testimonial-wrap{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 1rem;
}
.testimonial-track{
  display:flex;
  gap: 1.4rem;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: .3rem;
}
.testimonial-track::-webkit-scrollbar{ display:none; }
.testimonial-card{
  scroll-snap-align: start;
  flex: 0 0 min(420px, 84vw);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  margin:0;
}
.testimonial-card p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--cream);
  margin-bottom: 1.2rem;
}
.testimonial-card footer{
  font-family: var(--font-utility);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--pink);
}
.carousel-btn{
  width: 2.6rem; height: 2.6rem;
  border-radius:50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--cream);
  flex-shrink:0;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.carousel-btn:hover{ border-color: var(--pink); color: var(--pink); }
.testimonial-cta{ display:flex; flex-direction:column; align-items:center; gap: 1rem; margin-top: 2.2rem; }
.testimonial-rating{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin:0; font-size:.9rem; color: var(--cream-dim); text-align:center; }
.testimonial-rating a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.testimonial-rating a:hover{ color: var(--pink); }
.testimonial-note{
  margin-top: 1.4rem;
  font-size:.78rem;
  color: var(--cream-dim);
}

/* =========================================================
   FAQ / ACCORDION
   ========================================================= */
.faq-grid{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items:start;
}
.faq-head{ position:sticky; top: 110px; }
.accordion-item{ border-bottom: 1px solid var(--line); }
.accordion-heading{ margin:0; font-size:inherit; line-height:inherit; letter-spacing:inherit; } /* <h3> solo por semántica: el estilo lo pone .accordion-question */
.accordion-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 1.3rem;
  text-align:left;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight:600;
  color: var(--cream);
}
.accordion-chevron{ flex-shrink:0; transition: transform .3s var(--ease); color: var(--pink); }
.accordion-question[aria-expanded="true"] .accordion-chevron{ transform: rotate(180deg); }
.accordion-answer{
  display:grid;
  grid-template-rows: 0fr;
  overflow:hidden;
  transition: grid-template-rows .3s var(--ease);
}
.accordion-answer > p{
  overflow:hidden;
  min-height:0;
  margin: 0;
  padding-bottom: 0;
  color: var(--cream-dim);
}
.accordion-item.is-open .accordion-answer{ grid-template-rows: 1fr; }
.accordion-item.is-open .accordion-answer > p{ padding-bottom: 1.3rem; }

/* =========================================================
   CTA FINAL / FORM
   ========================================================= */
.final-cta-inner{
  display:grid;
  grid-template-columns: 1fr .95fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items:start;
}
.final-cta h2{ font-size: clamp(2.1rem, 4vw, 3rem); }
.contact-links{ display:flex; flex-direction:column; gap:.85rem; margin-top: 1.6rem; }
.contact-links a{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700;
  color: var(--cream);
  transition: color .25s var(--ease);
}
.contact-links a:hover{ color: var(--pink); }
.contact-phone{
  font-family: var(--font-utility);
  font-size: clamp(1.6rem, 3.5vw, 2rem);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.contact-links a:hover .contact-phone{ color: var(--pink); }

.booking-form{
  background: var(--curtain);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display:flex; flex-direction:column; gap: 1.1rem;
}
.form-row{ display:flex; flex-direction:column; gap:.4rem; }
.form-row label{ font-size:.8rem; color: var(--cream-dim); }
.form-row input, .form-row select, .form-row textarea{
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75em .9em;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .95rem;
  resize: vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color: var(--pink);
  outline: none;
}
.cf-turnstile{ display:flex; justify-content:center; min-height:65px; } /* reserva el alto del widget para que el formulario no salte al cargarlo */
@media (max-width: 389px){ .cf-turnstile{ min-height:140px; } } /* widget compacto (ver index.php) */
@media (max-width: 359px){ .btn{ white-space: normal; text-align: center; } } /* p. ej. «Pedir presupuesto para empresas» no cabe en una línea a 320 px */
.footer-official{ color: var(--gold); font-weight:700; }
.form-note{ font-size:.76rem; color: var(--cream-dim); text-align:center; margin:0; }
.form-status{ font-size:.85rem; font-weight:700; color: var(--gold); text-align:center; margin:0; min-height:1.2em; }
.form-status.is-error{ color: var(--pink); }
.form-status.is-warning{
  color: var(--gold);
  background: rgba(240,193,92,.12);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: .6em .9em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-block: 3rem 1.5rem;
}
.footer-inner{
  display:flex; flex-wrap:wrap; gap: 2rem;
  justify-content:space-between; align-items:flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand p{ color: var(--cream-dim); font-size:.88rem; margin-top:.4rem; }
.footer-nav{ display:flex; flex-wrap:wrap; gap: 1.3rem; }
.footer-nav a{ font-size:.88rem; color: var(--cream-dim); }
.footer-nav a:hover{ color: var(--pink); }
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
  width: 2.3rem; height: 2.3rem; border-radius:50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-utility); font-size:.7rem; letter-spacing:.05em;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.footer-social a:hover{ border-color: var(--pink); color: var(--pink); }
.footer-tpl-note{ font-style: italic; opacity:.7; }
.footer-credit-link{
  color: var(--pink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color .2s var(--ease);
}
.footer-credit-link:hover{ color: var(--gold); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding-top: 1.4rem;
  font-size:.78rem;
  color: var(--cream-dim);
}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.whatsapp-float{
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  z-index: 90;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C4A);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 26px -8px rgba(0,0,0,.55);
  transition: transform .25s var(--ease);
}
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.05); }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* Hero: misma entrada que .reveal, pero solo con CSS y desde el primer
   pintado. Con .reveal el texto del hero (el LCP en móvil) seguía invisible
   hasta que cargaba app.js: Lighthouse medía LCP de 5,3 s. */
.hero-in{ animation: hero-in .7s var(--ease) both; }
.hero-in:nth-child(3){ animation-delay: .08s; }
.hero-in:nth-child(4){ animation-delay: .16s; }
.hero-in:nth-child(5){ animation-delay: .24s; }
@keyframes hero-in{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform: translateY(0); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .faq-grid{ grid-template-columns: 1fr; }
  .faq-head{ position:static; }
  .final-cta-inner{ grid-template-columns: minmax(0, 1fr); } /* minmax(0,…): que los <select> largos no ensanchen la columna en móvil */
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
  .persona-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-strip{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  /* Alto = viewport GRANDE (con barras del navegador recogidas): con inset:0
     el panel medía el viewport pequeño y, al esconderse la barra de Safari/Chrome
     durante el scroll, quedaba un hueco abajo hasta que el navegador recalculaba.
     El padding inferior compensa la parte que tapa la barra cuando está visible. */
  .main-nav{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    height: 100lvh;
    width: min(78vw, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink-soft);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6rem 2rem calc(2rem + 100lvh - 100svh + env(safe-area-inset-bottom));
    gap: 2.5rem;
    transform: translateX(100%);
    /* Cerrado = oculto de verdad (no se pinta ni se puede tabular a él) */
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .main-nav[data-state="open"]{
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s var(--ease), visibility 0s;
  }
  /* Con el menú abierto la página de detrás no se mueve (y las barras del navegador tampoco) */
  html.nav-open{ overflow: hidden; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap: 1.4rem; }
  .nav-link{ font-size: 1.05rem; }
  .nav-cta{ width:100%; text-align:center; }
  .nav-toggle{ display:flex; position:relative; z-index:1; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .card-grid{ grid-template-columns: 1fr; }
  .persona-grid{ grid-template-columns: 1fr; }
  .gallery-strip{ grid-template-columns: repeat(2, 1fr); }
  .testimonial-wrap{ grid-template-columns: 1fr; }
  .carousel-btn{ display:none; }
  .about-stat-card{ right: .6rem; bottom: -1rem; }

  /* Estrellas encima del texto y todo centrado */
  .hero-rating{ flex-direction:column; gap:.35rem; text-align:center; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-in{ animation:none; }
  *{ scroll-behavior:auto !important; }
}