/* ============================================================================
   PEAK WAVE CREATORS — hoja de estilos
   ----------------------------------------------------------------------------
   Todo lo que probablemente quieras tocar está en :root (colores y fuentes).
   Cambiás una variable ahí y se actualiza todo el sitio.
   ========================================================================== */

:root{

  /* ---- PALETA (Opción 1 del brief) ------------------------------------
     Para probar otra opción, reemplazá estos 4 valores:

     Opción 2: --verde #124A1D · --naranja #F5A803 · --lila #DBA5DF · --crema #F5F2ED
     Opción 3: --verde #023047 · --naranja #FB8501 · --lila #8ECAE6 · --crema #F5F2ED
     Opción 4: --verde #1A8F5E · --naranja #E55634 · --lila #C59EC4 · --crema #F5F2ED
  --------------------------------------------------------------------- */
  --verde:      #1B4D3E;   /* Deep wave — fondos fuertes, footer */
  --naranja:    #E85C00;   /* Peak orange — botones y acentos */
  --lila:       #D9B8E0;   /* Foam lilac — fondos suaves */
  --crema:      #EDE8E0;   /* Sand cream — respiro visual */

  /* Derivados */
  --verde-osc:  #123529;
  --verde-claro:#2E6B57;
  --naranja-osc:#C44E00;
  --crema-claro:#F7F4EF;
  --negro:      #0D0D0D;
  --gris:       #5C5C58;
  --gris-claro: #DCD8D1;
  --blanco:     #FFFFFF;

  /* ---- TIPOGRAFÍA -----------------------------------------------------
     Cuando lleguen las fuentes de Clari (Charming / Scripter), cambiá acá
     y en el <link> de Google Fonts del index.html
  --------------------------------------------------------------------- */
  --font-titulo: "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- MEDIDAS -------------------------------------------------------- */
  --ancho:      1140px;
  --radio:      16px;
  --radio-sm:   10px;
  --sombra:     0 1px 2px rgba(13,13,13,.04), 0 8px 24px rgba(13,13,13,.06);
  --sombra-alta:0 2px 4px rgba(13,13,13,.05), 0 16px 40px rgba(13,13,13,.10);
  --trans:      .25s cubic-bezier(.4,0,.2,1);
}

/* ============================ BASE ======================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;   /* para que el header fijo no tape los títulos */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-texto);
  font-size:17px;
  line-height:1.65;
  color:var(--negro);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-titulo);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}

p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:24px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--verde); color:#fff; padding:12px 20px; z-index:999;
}
.skip-link:focus{ left:12px; top:12px; }

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

/* ============================ BOTONES =================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px;
  font-family:var(--font-texto);
  font-size:16px; font-weight:600; line-height:1;
  text-decoration:none;
  border:2px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:transform var(--trans), background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--naranja); color:#fff; box-shadow:0 6px 18px rgba(232,92,0,.28); }
.btn-primary:hover{ background:var(--naranja-osc); box-shadow:0 10px 26px rgba(232,92,0,.34); }

.btn-ghost{ background:transparent; color:var(--negro); border-color:var(--negro); }
.btn-ghost:hover{ background:var(--negro); color:#fff; }

.btn-wa{ background:#25D366; color:#0A2E17; }
.btn-wa:hover{ background:#1FBA59; }

.btn-sm{ padding:11px 20px; font-size:15px; }
.btn-block{ width:100%; }

/* ============================ HEADER ==================================== */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--trans), box-shadow var(--trans);
}
.site-header.is-scrolled{
  border-bottom-color:var(--gris-claro);
  box-shadow:0 2px 12px rgba(13,13,13,.05);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:84px;
}

/* El logo es el único elemento con personalidad fuerte: chico y limpio */
.logo{
  display:inline-flex; align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.logo img{
  height:56px; width:auto;
  transition:opacity var(--trans);
}
.logo:hover img{ opacity:.78; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav ul{ display:flex; gap:26px; }
.nav a{
  text-decoration:none; font-size:15px; font-weight:500; color:var(--negro);
  position:relative; padding-block:4px;
}
.nav ul a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--naranja); transform:scaleX(0); transform-origin:left;
  transition:transform var(--trans);
}
.nav ul a:hover::after,
.nav ul a.is-active::after{ transform:scaleX(1); }
.nav-cta{ color:#fff !important; }

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:10px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; height:2px; width:100%; background:var(--negro);
  border-radius:2px; transition:transform var(--trans), opacity var(--trans);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ============================ HERO ====================================== */

.hero{
  position:relative;
  background:linear-gradient(180deg, var(--crema-claro) 0%, var(--crema) 100%);
  padding:clamp(40px,5.5vw,72px) 0 clamp(56px,8vw,100px);
  overflow:hidden;
}
.hero-inner{ max-width:840px; text-align:center; }

.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--naranja);
  margin:0 0 18px;
}

.hero-title{
  font-size:clamp(42px,7.2vw,80px);
  margin:0 0 18px;
  color:var(--verde);
}
.hero-title em{ font-style:italic; color:var(--naranja); }

.hero-lead{
  font-size:clamp(17px,2.1vw,21px);
  color:var(--gris);
  max-width:620px; margin:0 auto 34px;
}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-bottom:28px;
}

.hero-note{
  font-size:15px; color:var(--gris);
  max-width:520px; margin:0 auto;
  padding:16px 22px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(27,77,62,.12);
  border-radius:var(--radio);
}
.hero-note strong{ color:var(--verde); }

.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; line-height:0;
  pointer-events:none;
}
.hero-wave svg{ width:100%; height:70px; }
.hero-wave path{ fill:var(--blanco); }

/* ============================ SECCIONES ================================= */

.section{ padding:clamp(44px,6vw,76px) 0; }
.section-cream{ background:var(--crema-claro); }
.section-lila{ background:var(--lila); }
.section-green{ background:var(--verde); color:var(--crema-claro); }
.section-green .section-title,
.section-green h3{ color:var(--blanco); }
.section-green .eyebrow{ color:var(--lila); }
.section-green .section-lead{ color:rgba(255,255,255,.78); }

.section-head{ max-width:720px; margin:0 0 clamp(26px,3.5vw,40px); }
.section-title{
  font-size:clamp(28px,4.4vw,44px);
  color:var(--verde);
  margin:0 0 16px;
}
.section-lead{ font-size:17.5px; color:var(--gris); margin:0; }

/* ============================ ¿TE SUENA? ================================ */

.pain-list{
  display:grid; gap:12px;
  max-width:820px;
  margin-bottom:40px;
}
.pain-list li{
  position:relative;
  padding:16px 20px 16px 52px;
  background:var(--blanco);
  border-radius:var(--radio-sm);
  border:1px solid var(--gris-claro);
  font-size:16.5px;
}
.pain-list li::before{
  content:"→";
  position:absolute; left:20px; top:15px;
  color:var(--naranja); font-weight:700;
}

.pain-close{
  font-family:var(--font-titulo);
  font-size:clamp(20px,3vw,28px);
  line-height:1.35;
  color:var(--verde);
  max-width:640px;
  margin:0;
}
.pain-close strong{ color:var(--naranja); font-weight:600; }

/* ============================ CARDS / SERVICIOS ========================= */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px;
}

.card{
  position:relative;
  padding:32px 28px;
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:var(--radio);
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-alta);
  border-color:transparent;
}
.card-num{
  display:block;
  font-family:var(--font-titulo);
  font-size:14px; font-weight:700; letter-spacing:.1em;
  color:var(--naranja);
  margin-bottom:14px;
}
.card h3{ font-size:21px; color:var(--verde); margin-bottom:10px; }
.card p{ font-size:16px; color:var(--gris); margin:0; }

.card-cta{
  background:var(--verde);
  border-color:var(--verde);
  display:flex; flex-direction:column; justify-content:center;
}
.card-cta h3{ color:var(--blanco); }
.card-cta p{ color:rgba(255,255,255,.78); margin-bottom:20px; }
.card-cta .btn{ align-self:flex-start; }

/* ============================ PROCESO =================================== */

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:32px 28px;
}
.steps li{ position:relative; padding-top:20px; }
.steps li::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.2);
}
.steps li:first-child::before{ background:var(--naranja); }
.step-num{
  display:block;
  font-family:var(--font-titulo);
  font-size:13px; font-weight:700; letter-spacing:.12em;
  color:var(--naranja);
  margin-bottom:12px;
}
.steps h3{ font-size:20px; margin-bottom:8px; }
.steps p{ font-size:15.5px; color:rgba(255,255,255,.75); margin:0; }

/* ============================ RESULTADOS ================================ */

.cases{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
  margin-bottom:56px;
}
.case{
  padding:34px 30px;
  background:var(--crema-claro);
  border-radius:var(--radio);
  border:1px solid var(--gris-claro);
}
.case-brand{ font-size:24px; color:var(--verde); margin-bottom:4px; }
.case-tag{
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); margin-bottom:24px;
}
.case-stats{
  display:grid; gap:20px;
  padding:22px 0;
  border-block:1px solid var(--gris-claro);
  margin-bottom:20px;
}
.case-stats div{ display:flex; flex-direction:column; gap:2px; }
.case-stats strong{
  font-family:var(--font-titulo);
  font-size:clamp(30px,4.5vw,40px); font-weight:700; line-height:1;
  color:var(--naranja);
}
.case-stats span{ font-size:14.5px; color:var(--gris); }
.case-text{ font-size:15.5px; color:var(--gris); margin:0; }

.clients{ text-align:center; }
.clients-title{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); margin-bottom:18px;
}
.clients-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
}
.clients-list li{
  padding:9px 18px;
  font-size:15px; font-weight:500;
  color:var(--verde);
  background:var(--crema-claro);
  border:1px solid var(--gris-claro);
  border-radius:999px;
}

/* ============================ GALERÍA FOTO/VIDEO ======================== */
/* Mosaico por columnas: cada foto conserva su proporción original.
   No se recorta nada, así conviven verticales, cuadradas y panorámicas. */

.gallery{
  columns:5;
  column-gap:16px;
}
.shot{
  position:relative;
  display:block;
  margin:0 0 16px;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--crema);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}

.shot img,
.shot video{
  width:100%; height:auto;
  display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.shot:hover img,
.shot:hover video{ transform:scale(1.04); }

.shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 18px 14px;
  font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(13,13,13,.75));
}

.gallery-cta{
  margin:28px 0 0;
  font-size:16px; color:var(--gris);
}
.gallery-cta a{ color:var(--naranja); font-weight:600; }

@media (max-width:1100px){
  .gallery{ columns:4; }
}
@media (max-width:820px){
  .gallery{ columns:3; }
}
@media (max-width:560px){
  .gallery{ columns:2; }
}

/* ============================ TESTIMONIOS (chat) ======================== */

.chats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
  max-width:900px;
}
.chat{
  background:var(--blanco);
  border-radius:var(--radio);
  padding:18px 20px;
}
.chat-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.chat-avatar{
  width:32px; height:32px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--verde); color:#fff;
  border-radius:50%;
  font-size:13px; font-weight:600;
}
.chat-name{ font-weight:600; font-size:14.5px; color:var(--verde); }
.chat-name em{ font-style:normal; font-weight:400; color:var(--gris); }
.bubble{
  background:var(--crema-claro);
  border-radius:4px 14px 14px 14px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.55;
  margin:0 0 6px;
}
.bubble:last-child{ margin-bottom:0; }

/* ============================ NOSOTRAS ================================== */

.team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
  margin-bottom:64px;
}
.member-photo{
  position:relative;
  width:180px; height:180px;
  border-radius:50%;
  overflow:hidden;
  background:var(--lila);
  margin-bottom:22px;
  display:grid; place-items:center;
}
.member-initials{
  font-family:var(--font-titulo);
  font-size:60px; font-weight:700; color:var(--verde);
}
.member-photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.member h3{ font-size:24px; color:var(--verde); margin-bottom:2px; }
.member-role{
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--naranja); margin-bottom:14px;
}
.member p{ font-size:16px; color:var(--gris); }

.philosophy{
  max-width:780px; margin:0;
  padding:36px 0 0;
  border-top:2px solid var(--gris-claro);
}
.philosophy p{
  font-family:var(--font-titulo);
  font-size:clamp(19px,2.6vw,25px);
  line-height:1.45;
  color:var(--verde);
  margin-bottom:16px;
}
.philosophy cite{
  font-style:italic;
  font-family:var(--font-titulo);
  font-size:18px;
  color:var(--naranja);
}

/* ============================ RECURSOS ================================== */

.resources{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:20px;
  margin-bottom:44px;
}
.resource{
  padding:28px 26px;
  border:1px solid var(--gris-claro);
  border-radius:var(--radio);
  background:var(--crema-claro);
}
.resource-tag{
  display:inline-block;
  padding:4px 11px; margin-bottom:14px;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--verde);
  background:var(--lila);
  border-radius:999px;
}
.resource h3{ font-size:19px; color:var(--verde); margin-bottom:8px; }
.resource p{ font-size:15.5px; color:var(--gris); margin:0; }

.newsletter{
  padding:32px;
  background:var(--verde);
  border-radius:var(--radio);
  color:var(--crema-claro);
}
.newsletter-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin-bottom:18px;
}
.newsletter .field span{ color:rgba(255,255,255,.85); }
.newsletter .check span{ color:rgba(255,255,255,.75); }

/* ============================ FORMULARIOS =============================== */

.field{ display:block; margin-bottom:18px; }
.field > span,
.field > legend{
  display:block;
  font-size:14px; font-weight:600;
  margin-bottom:7px;
  color:var(--verde);
}
.field em{ font-style:normal; font-weight:400; opacity:.7; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea,
.field select{
  width:100%;
  padding:13px 15px;
  font-family:var(--font-texto);
  font-size:16px;
  color:var(--negro);
  background:var(--blanco);
  border:1.5px solid var(--gris-claro);
  border-radius:var(--radio-sm);
  transition:border-color var(--trans), box-shadow var(--trans);
}
.field textarea{ resize:vertical; min-height:88px; }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(232,92,0,.15);
}

fieldset.field{ border:0; padding:0; margin-inline:0; }

.checks{ display:flex; flex-wrap:wrap; gap:10px; }
.checks .check{
  align-items:center;
  padding:10px 16px;
  font-size:15.5px; font-weight:500;
  color:var(--negro);
  background:var(--blanco);
  border:2px solid #BFB9AF;
  border-radius:999px;
  margin:0;
  transition:border-color var(--trans), background var(--trans), color var(--trans);
}
.checks .check:hover{ border-color:var(--verde); }

/* Cuando la persona lo tilda, se pinta: queda clarísimo qué eligió */
.checks .check:has(input:checked){
  background:var(--verde);
  border-color:var(--verde);
  color:var(--blanco);
}

.check{
  display:flex; align-items:flex-start; gap:9px;
  font-size:14.5px; cursor:pointer;
  margin-bottom:18px;
}
.check input{ margin-top:3px; accent-color:var(--naranja); flex-shrink:0; }
.checks .check input{ margin-top:0; }

.form-note{ font-size:13.5px; color:var(--gris); text-align:center; margin:14px 0 0; }
.form-note a{ color:var(--naranja); }

/* honeypot anti-spam: invisible para personas */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ============================ CONTACTO ================================== */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.contact-intro p{ color:rgba(255,255,255,.8); }
.contact-perks{ display:grid; gap:10px; margin:24px 0 32px; }
.contact-perks li{
  position:relative; padding-left:28px;
  font-size:16px; color:rgba(255,255,255,.9);
}
.contact-perks li::before{
  content:"✓"; position:absolute; left:0;
  color:var(--lila); font-weight:700;
}
.contact-direct{
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.18);
}
.contact-direct p{ font-size:15px; margin-bottom:14px; }

.contact-form{
  background:var(--blanco);
  padding:32px;
  border-radius:var(--radio);
  box-shadow:var(--sombra-alta);
}

/* ============================ FOOTER ==================================== */

.site-footer{
  background:var(--verde-osc);
  color:rgba(255,255,255,.72);
  padding:64px 0 0;
  font-size:15px;
}
.footer-inner{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px 32px;
  padding-bottom:48px;
}
.logo-footer img{ height:96px; }
.footer-claim{
  margin-top:16px; max-width:300px;
  font-family:var(--font-titulo);
  font-size:16.5px; font-style:italic; line-height:1.45;
  color:rgba(255,255,255,.72);
}
.footer-col h4{
  font-family:var(--font-texto);
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lila);
  margin-bottom:16px;
}
.footer-col ul{ display:grid; gap:10px; }
.footer-col a{ text-decoration:none; transition:color var(--trans); }
.footer-col a:hover{ color:var(--naranja); }
.footer-place{ margin-top:18px; font-size:14px; color:rgba(255,255,255,.5); }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;
  color:rgba(255,255,255,.5);
}
.footer-bottom p{ margin:0; }
.footer-bottom a{ text-decoration:none; }
.footer-bottom a:hover{ color:var(--naranja); }

/* ============================ WHATSAPP FLOTANTE ========================= */

.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  border-radius:50%;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform var(--trans);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }

/* ============================ ANIMACIÓN AL SCROLL ======================= */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================ PÁGINAS SIMPLES =========================== */

.page-simple{ padding:clamp(70px,9vw,110px) 0; }
.page-simple .container{ max-width:760px; }
.page-simple h1{ font-size:clamp(32px,5vw,48px); color:var(--verde); }
.page-simple h2{ font-size:22px; color:var(--verde); margin-top:38px; }
.page-simple p,
.page-simple li{ color:var(--gris); font-size:16.5px; }
.page-simple ul{ list-style:disc; padding-left:22px; margin-bottom:1em; }
.page-simple li{ margin-bottom:6px; }
.page-simple a{ color:var(--naranja); }

.thanks{
  min-height:70vh;
  display:grid; place-items:center;
  text-align:center;
  background:var(--crema-claro);
  padding:80px 0;
}
.thanks-icon{
  width:76px; height:76px; margin:0 auto 26px;
  display:grid; place-items:center;
  background:var(--naranja); color:#fff;
  border-radius:50%;
  font-size:36px;
}

/* ---- descargas en la página de gracias ---- */
.descargas{
  max-width:620px;
  margin:56px auto 0;
  padding-top:44px;
  border-top:1px solid var(--gris-claro);
  text-align:left;
}
.descargas h2{
  font-size:24px; color:var(--verde);
  text-align:center; margin-bottom:6px;
}
.descargas-bajada{
  text-align:center; font-size:15.5px; color:var(--gris);
  margin-bottom:26px;
}
.descargas-lista{ display:grid; gap:12px; }
.descargas-lista a{
  display:block;
  padding:18px 22px;
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:var(--radio);
  text-decoration:none;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.descargas-lista a:hover{
  transform:translateY(-2px);
  border-color:var(--naranja);
  box-shadow:var(--sombra);
}
.dl-tag{
  display:inline-block; margin-bottom:8px;
  padding:3px 10px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--verde); background:var(--lila);
  border-radius:999px;
}
.dl-titulo{
  display:block;
  font-family:var(--font-titulo); font-weight:600; font-size:18px;
  color:var(--verde); line-height:1.25;
  margin-bottom:4px;
}
.dl-meta{ display:block; font-size:13.5px; color:var(--gris); }

/* ============================ RESPONSIVE ================================ */

@media (max-width:960px){
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){

  .nav-toggle{ display:flex; }

  .nav{
    position:fixed; inset:84px 0 auto;
    flex-direction:column; align-items:stretch;
    gap:0;
    background:var(--blanco);
    border-bottom:1px solid var(--gris-claro);
    padding:8px 24px 28px;
    box-shadow:0 16px 30px rgba(13,13,13,.08);
    max-height:calc(100dvh - 84px);
    overflow-y:auto;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--trans), transform var(--trans), visibility var(--trans);
  }
  .nav.is-open{ opacity:1; transform:none; visibility:visible; }

  .nav ul{ flex-direction:column; gap:0; }
  .nav ul li{ border-bottom:1px solid var(--gris-claro); }
  .nav ul a{ display:block; padding:15px 0; font-size:16.5px; }
  .nav ul a::after{ display:none; }
  .nav-cta{ margin-top:20px; width:100%; }
}

@media (max-width:620px){
  body{ font-size:16.5px; }
  .container{ padding-inline:20px; }
  .contact-form,
  .newsletter{ padding:24px 20px; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .case-stats{ gap:16px; }
  .member-photo{ width:150px; height:150px; }
  .hero-actions .btn{ width:100%; }
  .wa-float{ width:52px; height:52px; right:16px; bottom:16px; }
}

/* ============================ KIT PAGO ================================== */

.kit-grid{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:56px;
  align-items:center;
}

.kit-visual img{
  width:100%;
  border-radius:var(--radio);
  box-shadow:0 12px 40px rgba(13,13,13,.22);
  transform:rotate(-2deg);
  transition:transform var(--trans);
}
.kit-visual img:hover{ transform:rotate(0deg) scale(1.02); }

.kit-info .section-title{ margin-bottom:18px; }
.kit-lead{ font-size:17.5px; color:var(--verde-osc); margin-bottom:26px; }

.kit-lista{ display:grid; gap:11px; margin-bottom:32px; }
.kit-lista li{
  position:relative; padding-left:28px;
  font-size:16px; color:var(--verde-osc);
}
.kit-lista li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--naranja); font-weight:700; font-size:17px;
}
.kit-lista strong{ color:var(--verde); }

.kit-compra{
  display:flex; align-items:center; flex-wrap:wrap; gap:22px;
  padding:22px 26px;
  background:var(--blanco);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.kit-precio{
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--font-titulo);
}
.kit-precio .moneda{ font-size:16px; font-weight:600; color:var(--gris); }
.kit-precio .numero{ font-size:52px; font-weight:700; line-height:1; color:var(--verde); }
.kit-precio .unico{
  font-family:var(--font-texto);
  font-size:13px; color:var(--gris); margin-left:6px;
}

.kit-nota{
  margin:16px 0 0;
  font-size:14.5px; color:var(--verde-osc); opacity:.75;
}

@media (max-width:860px){
  .kit-grid{ grid-template-columns:1fr; gap:36px; }
  .kit-visual{ max-width:300px; margin-inline:auto; }
}
@media (max-width:520px){
  .kit-compra{ flex-direction:column; align-items:stretch; text-align:center; }
  .kit-compra .btn{ width:100%; }
  .kit-precio{ justify-content:center; }
}

/* Aviso arriba del formulario de recursos: aclara que no se descargan
   haciendo clic en las tarjetas, sino dejando el mail. */
.recursos-aviso{
  max-width:640px;
  margin:0 0 24px;
  padding:16px 22px;
  font-size:16px;
  color:var(--verde-osc);
  background:var(--crema-claro);
  border-left:3px solid var(--naranja);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0;
}
.recursos-aviso strong{ color:var(--verde); }

/* ============================ KIT PLEGABLE ============================== */
/* Arranca como una barra discreta. Al hacer clic se despliega la ficha
   completa. Usa <details>/<summary> nativos: funciona sin JavaScript. */

.kit-caja{
  background:var(--blanco);
  border:1.5px solid var(--gris-claro);
  border-radius:var(--radio);
  overflow:hidden;
  transition:border-color var(--trans), box-shadow var(--trans);
}
.kit-caja[open]{
  border-color:transparent;
  box-shadow:var(--sombra-alta);
}

.kit-resumen{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  padding:20px 26px;
  cursor:pointer;
  list-style:none;
  transition:background var(--trans);
}
.kit-resumen::-webkit-details-marker{ display:none; }
.kit-resumen:hover{ background:var(--crema-claro); }

.kit-resumen-texto{ display:flex; flex-direction:column; gap:3px; }
.kit-etiqueta{
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--naranja);
}
.kit-titulo-chico{
  font-family:var(--font-titulo);
  font-size:19px; font-weight:600; color:var(--verde);
  letter-spacing:-.01em;
}

.kit-resumen-lado{ display:flex; align-items:center; gap:18px; }
.kit-precio-chico{
  font-family:var(--font-titulo);
  font-size:17px; font-weight:700; color:var(--verde);
}
.kit-ver{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:600; color:var(--naranja);
  white-space:nowrap;
}
.kit-ver::after{
  content:"";
  width:7px; height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--trans);
}
.kit-caja[open] .kit-ver::after{ transform:rotate(225deg) translate(-2px,-2px); }
.kit-caja[open] .kit-ver{ font-size:0; }
.kit-caja[open] .kit-ver::after{ font-size:14.5px; }

.kit-caja .kit-grid{
  padding:8px 26px 30px;
  border-top:1px solid var(--gris-claro);
  margin-top:2px;
}

@media (max-width:620px){
  .kit-resumen{ padding:18px 20px; }
  .kit-resumen-lado{ width:100%; justify-content:space-between; }
  .kit-caja .kit-grid{ padding:8px 20px 26px; }
}

/* ============ CAMPOS OPCIONALES DEL FORMULARIO DE CONTACTO ============== */
/* Arrancan plegados para que el formulario se vea corto y no espante.
   Todo lo de adentro es opcional: si nadie lo abre, el envío funciona igual. */

.mas-datos{
  margin:4px 0 20px;
  border:1.5px dashed var(--gris-claro);
  border-radius:var(--radio-sm);
  transition:border-color var(--trans);
}
.mas-datos[open]{ border-style:solid; }
.mas-datos:hover{ border-color:var(--naranja); }

.mas-datos > summary{
  display:flex; align-items:center; gap:9px;
  padding:13px 16px;
  font-size:14.5px; font-weight:600;
  color:var(--verde);
  cursor:pointer;
  list-style:none;
}
.mas-datos > summary::-webkit-details-marker{ display:none; }
.mas-datos > summary em{
  font-style:normal; font-weight:400; color:var(--gris);
}
.mas-datos > summary::before{
  content:"+";
  display:inline-grid; place-items:center;
  width:20px; height:20px; flex-shrink:0;
  font-size:17px; line-height:1;
  color:#fff; background:var(--naranja);
  border-radius:50%;
}
.mas-datos[open] > summary::before{ content:"−"; }

.mas-datos-cuerpo{
  padding:4px 16px 6px;
  border-top:1px solid var(--gris-claro);
}
.mas-datos-cuerpo .field:last-child{ margin-bottom:14px; }

@media (max-width:520px){
  .mas-datos > summary{ font-size:14px; padding:12px 14px; }
  .mas-datos-cuerpo{ padding-inline:14px; }
}

/* "Resultados" y "Nuestro trabajo" son dos secciones seguidas con el mismo
   fondo blanco, así que se sumaban los dos márgenes y quedaba un hueco enorme.
   Con esto el separador lo pone solamente la sección de arriba. */
#trabajo{ padding-top:0; }

/* Bloque de "asesoría 1 a 1" en la página de descargas: es una oferta suave,
   después de haber dado el material. No tiene que parecer una venta. */
.oferta-suave{
  max-width:640px;
  margin:44px auto 0;
  padding:32px 30px;
  background:var(--verde);
  border-radius:var(--radio);
  text-align:center;
}
.oferta-suave h2{
  font-size:23px; color:#fff; margin-bottom:12px;
}
.oferta-suave p{
  font-size:16px; color:rgba(255,255,255,.82);
  margin:0 auto 22px; max-width:480px;
}

/* Recordatorio de los recursos en la página de la auditoría */
.nota-recursos{
  max-width:520px;
  margin:34px auto 0;
  padding:16px 22px;
  font-size:15.5px; color:var(--gris);
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:var(--radio-sm);
}
.nota-recursos a{ color:var(--naranja); font-weight:600; }

/* ============================ PREGUNTAS FRECUENTES ====================== */

.faq{
  max-width:800px;
  display:grid; gap:12px;
}
.faq-item{
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:var(--radio-sm);
  overflow:hidden;
  transition:border-color var(--trans), box-shadow var(--trans);
}
.faq-item[open]{
  border-color:transparent;
  box-shadow:var(--sombra);
}
.faq-item > summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px;
  font-family:var(--font-titulo);
  font-size:17.5px; font-weight:600; color:var(--verde);
  cursor:pointer;
  list-style:none;
  transition:color var(--trans);
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary:hover{ color:var(--naranja); }
.faq-item > summary::after{
  content:"";
  width:9px; height:9px; flex-shrink:0;
  border-right:2px solid var(--naranja);
  border-bottom:2px solid var(--naranja);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform var(--trans);
}
.faq-item[open] > summary::after{ transform:rotate(225deg) translate(-3px,-3px); }

.faq-cuerpo{
  padding:0 22px 20px;
}
.faq-cuerpo p{
  font-size:16px; color:var(--gris); margin:0 0 12px;
}
.faq-cuerpo p:last-child{ margin-bottom:0; }

@media (max-width:520px){
  .faq-item > summary{ font-size:16px; padding:16px 18px; }
  .faq-cuerpo{ padding:0 18px 18px; }
}

/* Línea descriptiva del pie: le dice a Google de qué trata el sitio
   sin ocupar lugar en el diseño principal. */
.footer-seo{
  margin-top:14px; max-width:340px;
  font-size:13px; line-height:1.6;
  color:rgba(255,255,255,.42);
}

/* Videos dentro de la galeria.
   Llevan poster y preload="none": la pagina solo baja la imagen de portada y el
   video recien se descarga cuando alguien le da play.

   El aspect-ratio es imprescindible: como el navegador no descarga el video, no
   sabe cuanto mide, y sin esta linea el recuadro se aplasta a una tira fina.
   Los seis reels son verticales 9:16. */
.shot-video{ background:var(--verde-osc); }
.shot-video video{
  display:block;
  width:100%;
  aspect-ratio:9/16;
  height:auto;
  object-fit:cover;
  background:var(--verde-osc);
}
.shot-video:hover video{ transform:none; }

/* El epigrafe sube un poco para no taparse con los controles del reproductor */
.shot-video figcaption{ padding-bottom:46px; }