:root{
  --oscuro:#1D1A2E;
  --claro:#FAF7F2;
  --blanco:#FFFFFF;
  --marca:#F25C54;
  --marca-osc:#B83A32;
  --amarillo:#FFC93C;
  --azul:#2F6FED;
  --verde:#2BB673;
  --naranja:#FF8A2B;
  --wa:#25D366;
  --suave:#4A4560;
  --borde:#8A849C;
  --f-tit:'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-txt:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-s:12px;
  --r-m:20px;
  --r-l:28px;
  --r-pill:999px;
  --sombra:0 10px 30px rgba(0,0,0,.08);
  --sombra-fuerte:0 18px 40px rgba(29,26,46,.16);
  --pad:clamp(64px, 9vw, 128px);
  --t:.3s ease;
  --arcoiris:linear-gradient(90deg,var(--marca) 0 20%,var(--amarillo) 20% 40%,var(--azul) 40% 60%,var(--verde) 60% 80%,var(--naranja) 80% 100%);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-txt);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--oscuro);
  background:var(--claro);
  padding-bottom:84px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1rem}
h1,h2,h3{
  font-family:var(--f-tit);
  font-weight:400;
  line-height:1.02;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 .5em;
}
h2{font-size:clamp(2.1rem, 5.2vw, 3.7rem)}
h3{font-size:clamp(1.45rem, 2.4vw, 1.8rem)}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--oscuro);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--blanco);
}

.saltar{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--oscuro);color:var(--blanco);
  padding:.75rem 1rem;border-radius:var(--r-s);text-decoration:none;font-weight:700;
  transition:top var(--t);
}
.saltar:focus{top:12px}

.contenedor{max-width:1200px;margin:0 auto;padding:0 20px}
.seccion{padding:var(--pad) 0;position:relative}

.icono{width:22px;height:22px;flex:none}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.8rem 1.5rem;
  border-radius:var(--r-pill);border:2px solid transparent;
  font-family:var(--f-txt);font-size:1rem;font-weight:700;line-height:1.2;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform var(--t),box-shadow var(--t),background-color var(--t),color var(--t);
}
.btn:hover{transform:translateY(-2px)}
.btn-principal{
  background:var(--marca);color:var(--oscuro);
  border-color:var(--oscuro);
  box-shadow:0 5px 0 var(--oscuro);
}
.btn-principal:hover{box-shadow:0 7px 0 var(--oscuro)}
.btn-principal:active{transform:translateY(3px);box-shadow:0 2px 0 var(--oscuro)}
.btn-wa{background:var(--blanco);color:var(--oscuro);border-color:var(--oscuro)}
.btn-wa .icono{color:#1E9E50}
.btn-wa:hover{background:#E9FBEF}
.btn-claro{background:var(--blanco);color:var(--oscuro)}
.btn-claro:hover{background:var(--amarillo)}
.btn-borde-claro{background:transparent;color:var(--blanco);border-color:var(--blanco)}
.btn-borde-claro:hover{background:rgba(255,255,255,.12)}
.btn-borde-claro .icono{color:var(--wa)}
.btn-chico{min-height:48px;padding:.55rem 1rem;font-size:.95rem}

/* Cabecera */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,242,.96);
  backdrop-filter:saturate(1.2) blur(8px);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
}
.cabecera::after{content:"";display:block;height:5px;background:var(--arcoiris)}
.cab-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:70px}
.cab-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.cab-logo img{width:124px;height:auto}
.nav-escritorio{display:none}
.cab-acciones{display:flex;align-items:center;gap:8px}
.cab-acciones [data-fp="idioma"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:44px;padding:0 .5rem;
  font-weight:700;font-size:.95rem;text-decoration:underline;text-underline-offset:4px;
  border-radius:var(--r-s);
}
.cab-llamar{width:48px;padding:0}
.cab-llamar .txt-ancho{display:none}
.cab-wa{display:none}

.menu-movil summary{
  list-style:none;cursor:pointer;
  width:48px;height:48px;border-radius:var(--r-s);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--oscuro);
}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil summary span{display:block;width:22px;height:3px;border-radius:3px;background:var(--blanco)}
.menu-movil summary span:nth-child(2){background:var(--amarillo)}
.menu-panel{
  position:absolute;left:20px;right:20px;top:calc(100% + 6px);
  background:var(--blanco);border-radius:var(--r-m);box-shadow:var(--sombra-fuerte);
  padding:12px;display:grid;gap:4px;
}
.menu-panel a:not(.btn){
  display:flex;align-items:center;min-height:48px;padding:0 14px;
  border-radius:var(--r-s);text-decoration:none;font-weight:600;
}
.menu-panel a:not(.btn):hover{background:#FFF1C9}
.menu-panel .btn{margin-top:6px}

/* Portada */
.portada{position:relative;overflow:hidden;padding:clamp(36px,6vw,80px) 0 var(--pad)}
.portada::before,.portada::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
}
.portada::before{
  width:380px;height:380px;right:-120px;top:-120px;
  background:radial-gradient(circle,rgba(255,201,60,.55) 0 55%,transparent 56%);
}
.portada::after{
  width:260px;height:260px;left:-110px;bottom:40px;
  background:radial-gradient(circle,rgba(47,111,237,.18) 0 55%,transparent 56%);
}
.portada-grid{position:relative;z-index:1;display:grid;gap:44px;align-items:center}
.portada-logo{width:min(100%,440px);height:auto;margin-bottom:22px}
.ceja{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--oscuro);color:var(--blanco);
  padding:.45rem 1rem;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.ceja::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--amarillo);box-shadow:14px 0 0 var(--verde),28px 0 0 var(--azul);margin-right:28px}
.portada h1{font-size:clamp(2.6rem, 8vw, 5rem);margin:.35em 0 .4em}
.acento{
  color:var(--marca-osc);
  background:linear-gradient(transparent 62%, rgba(255,201,60,.85) 62% 92%, transparent 92%);
  padding:0 .06em;
}
.h1-marca{
  display:block;margin-top:.35em;
  font-size:.4em;letter-spacing:.03em;color:var(--oscuro);
}
.lead{font-size:1.15rem;color:var(--suave);max-width:36ch;margin-bottom:1.6rem}
.botones{display:flex;flex-wrap:wrap;gap:16px 14px}
.portada .botones .btn{flex:1 1 230px}
.nota{margin:1.3rem 0 0;font-size:.98rem;color:var(--suave)}
.nota a{color:var(--marca-osc);font-weight:700;text-underline-offset:3px}

.mosaico{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:120px;gap:10px}
.mosaico figure,.m-color{margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sombra)}
.mosaico img{width:100%;height:100%;object-fit:cover}
.m1{grid-column:1/-1;grid-row:span 2}
.m2,.m3{grid-row:span 2}
.m-color{
  background:var(--oscuro);color:var(--blanco);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 16px;
}
.m-color p{margin:0;font-family:var(--f-tit);text-transform:uppercase;font-size:1.25rem;line-height:1.05}
.pinceladas{width:100%;height:auto;display:block}

.franja{height:14px;background:var(--arcoiris)}

/* Encabezados de sección */
.cabeza-seccion{max-width:780px;margin-bottom:clamp(32px,5vw,56px)}
.cabeza-seccion p{font-size:1.1rem;color:var(--suave);margin:0}
.etiqueta{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem;
}
.etiqueta::before{content:"";width:28px;height:8px;border-radius:8px;background:var(--marca)}

/* Servicios bento */
.bento{display:grid;grid-template-columns:1fr;gap:16px}
.tile{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  background:var(--blanco);box-shadow:var(--sombra);
  transition:transform var(--t),box-shadow var(--t);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sombra-fuerte)}
.t-grande{display:flex;flex-direction:column;border:3px solid var(--oscuro)}
.t-grande img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover}
.tile-cuerpo{padding:26px 24px 28px}
.tile-cuerpo p{color:var(--suave)}
.tile-icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--r-m);
  background:var(--marca);color:var(--oscuro);margin-bottom:14px;
}
.tile-icono .icono{width:28px;height:28px}
.enlace-flecha{
  display:inline-flex;align-items:center;min-height:48px;
  font-weight:700;color:var(--marca-osc);text-underline-offset:4px;
}
.t-amarillo{background:var(--amarillo);padding:28px 24px}
.t-amarillo p{color:var(--oscuro)}
.muestras{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.muestra{width:40px;height:40px;border-radius:50%;border:3px solid var(--oscuro)}
.t-foto{min-height:300px;display:flex;align-items:flex-end;color:var(--blanco)}
.t-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-foto .tile-texto{
  position:relative;z-index:1;width:100%;padding:80px 22px 22px;
  background:linear-gradient(180deg,rgba(29,26,46,0) 0%,rgba(29,26,46,.88) 55%);
}
.t-foto .tile-texto p{margin:0;color:var(--blanco)}
.t-oscuro{background:var(--oscuro);color:var(--blanco);padding:28px 24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.t-oscuro h3{color:var(--amarillo)}
.t-oscuro p{color:#E9E6F0}

/* Ventajas */
.ventajas{background:var(--marca)}
.ventajas .etiqueta::before{background:var(--oscuro)}
.ventajas .cabeza-seccion p{color:var(--oscuro)}
.ventajas-grid{display:grid;gap:16px}
.ventaja{
  background:var(--blanco);border-radius:var(--r-l);padding:28px 24px;
  box-shadow:var(--sombra);border-top:10px solid var(--amarillo);
}
.ventaja:nth-child(2){border-top-color:var(--azul)}
.ventaja:nth-child(3){border-top-color:var(--verde)}
.ventaja:nth-child(4){border-top-color:var(--naranja)}
.ventaja p{color:var(--suave);margin:0}
.v-icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;background:var(--oscuro);color:var(--blanco);margin-bottom:14px;
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,4vw,44px);padding:0;list-style:none}
.chip{
  display:inline-flex;align-items:center;min-height:40px;
  padding:.4rem 1.05rem;border-radius:var(--r-pill);
  font-weight:600;font-size:.95rem;color:var(--oscuro);background:#FFE3E1;
}
.chip:nth-child(2){background:#FFF1C9}
.chip:nth-child(3){background:#DCE8FF}
.chip:nth-child(4){background:#D6F3E4}
.chip:nth-child(5){background:#FFE2CC}

/* Proceso */
.proceso{background:var(--amarillo)}
.proceso .etiqueta::before{background:var(--oscuro)}
.proceso .cabeza-seccion p{color:var(--oscuro)}
.proceso-grid{display:grid;gap:16px}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.paso{background:var(--blanco);border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--sombra)}
.paso-num{
  display:block;font-family:var(--f-tit);font-size:3rem;line-height:1;
  color:var(--marca-osc);margin-bottom:10px;
}
.paso h3{font-size:1.5rem}
.paso p{margin:0;color:var(--suave)}
.proceso-foto{margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sombra);border:3px solid var(--oscuro);min-height:280px}
.proceso-foto img{width:100%;height:100%;object-fit:cover}

/* Preguntas */
.faq-grid{display:grid;gap:36px}
.faq-intro p{color:var(--suave)}
.faq-lista{display:grid;gap:12px}
.faq-lista details{
  background:var(--blanco);border-radius:var(--r-m);
  border:2px solid var(--oscuro);overflow:hidden;
  transition:box-shadow var(--t);
}
.faq-lista details[open]{box-shadow:6px 6px 0 var(--marca)}
.faq-lista summary{
  list-style:none;cursor:pointer;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;font-weight:700;font-size:1.05rem;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{
  content:"+";flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--amarillo);font-size:1.4rem;line-height:1;
  transition:transform var(--t);
}
.faq-lista details[open] summary::after{transform:rotate(45deg)}
.faq-lista details p{padding:0 20px 20px;margin:0;color:var(--suave)}

/* Contacto */
.contacto{background:var(--oscuro);color:var(--blanco);overflow:hidden}
.contacto::before{
  content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,92,84,.35) 0 55%,transparent 56%);pointer-events:none;
}
.contacto-grid{position:relative;display:grid;gap:40px;align-items:start}
.contacto .etiqueta::before{background:var(--amarillo)}
.contacto h2 .acento-claro{color:var(--amarillo)}
.contacto-texto p{color:#E9E6F0;font-size:1.1rem}
.contacto .botones{margin-top:1.4rem}
.contacto-tel{font-family:var(--f-tit);font-size:clamp(2rem,5vw,2.8rem);letter-spacing:.01em;margin:1.6rem 0 0;color:var(--blanco)}
.contacto .pinceladas{max-width:340px;margin-top:20px}

.formulario{
  background:var(--blanco);color:var(--oscuro);
  border-radius:var(--r-l);padding:28px 22px;box-shadow:var(--sombra-fuerte);
  display:grid;gap:18px;
}
.formulario h3{font-size:1.7rem;margin:0}
.campo label{display:block;font-weight:600;margin-bottom:6px}
.campo .opc{font-weight:400;color:var(--suave)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:52px;padding:12px 14px;
  font-family:var(--f-txt);font-size:1rem;color:var(--oscuro);
  background:var(--claro);border:2px solid var(--borde);border-radius:var(--r-s);
  transition:border-color var(--t),background-color var(--t);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oscuro);background:var(--blanco)}
.campo textarea{min-height:120px;resize:vertical}
.campos-doble{display:grid;gap:18px}
.formulario .btn-principal{width:100%;font-size:1.05rem}
[data-fp="form-estado"]{margin:0;padding:12px 14px;border-radius:var(--r-s);background:#D6F3E4;font-weight:600}

/* Pie */
.pie{background:var(--oscuro);color:#E9E6F0;padding:56px 0 40px}
.pie-grid{display:grid;gap:28px}
.pie-logo{display:inline-block;background:var(--blanco);border-radius:var(--r-m);padding:14px 18px}
.pie-logo img{width:220px;height:auto}
.pie nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.pie nav a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;font-weight:600}
.pie nav a:hover{color:var(--amarillo)}
.pie-tel{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;font-weight:700;color:var(--blanco);text-decoration:none;font-size:1.15rem}
.pie-tel .icono{color:var(--marca)}
.pie-legal{margin:28px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:.9rem}

/* Barra fija móvil */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--oscuro);box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
.barra-movil .btn{min-height:52px;padding:.6rem .75rem;box-shadow:none;border-color:transparent}
.barra-movil .btn:hover{transform:none}
.btn-verde{background:var(--wa);color:var(--oscuro)}

/* Animación */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
.js [data-reveal].visible{opacity:1;transform:none}

/* Tablet */
@media (min-width:600px){
  .contenedor{padding:0 24px}
  .cab-logo img{width:160px}
  .campos-doble{grid-template-columns:1fr 1fr}
  .formulario{padding:34px 30px}
}
@media (min-width:700px){
  .cab-wa{display:inline-flex}
  .cab-llamar{width:auto;padding:.55rem 1rem}
  .cab-llamar .txt-ancho{display:inline}
  .bento{grid-template-columns:1fr 1fr}
  .t-grande{grid-column:1/-1}
  .ventajas-grid{grid-template-columns:1fr 1fr}
  .pasos{grid-template-columns:1fr 1fr}
  .mosaico{grid-auto-rows:150px}
}
@media (min-width:768px){
  body{font-size:1.125rem}
}

/* Escritorio */
@media (min-width:960px){
  body{padding-bottom:0}
  .barra-movil{display:none}
  .portada-grid{grid-template-columns:1.05fr 1fr}
  .mosaico{grid-template-columns:repeat(6,1fr);grid-auto-rows:62px;gap:12px}
  .m1{grid-column:1/5;grid-row:1/6}
  .m2{grid-column:5/7;grid-row:1/4}
  .m3{grid-column:5/7;grid-row:4/9}
  .m4{grid-column:1/3;grid-row:6/9}
  .m-color{grid-column:3/5;grid-row:6/9;padding:18px}
  .faq-grid{grid-template-columns:1fr 1.5fr;align-items:start}
  .faq-intro{position:sticky;top:110px}
  .contacto-grid{grid-template-columns:1fr 1.1fr}
  .pie-grid{grid-template-columns:1.2fr 1fr 1fr;align-items:start}
}
@media (min-width:1000px){
  .cab-logo img{width:200px}
  .menu-movil{display:none}
  .nav-escritorio{display:flex;gap:4px}
  .nav-escritorio a{
    display:inline-flex;align-items:center;min-height:48px;padding:0 .75rem;
    border-radius:var(--r-s);text-decoration:none;font-weight:600;font-size:.98rem;
    transition:background-color var(--t);
  }
  .nav-escritorio a:hover{background:#FFF1C9}
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(250px,auto)}
  .t-grande{grid-column:span 2;grid-row:span 2}
  .t-grande img{aspect-ratio:auto;flex:1;min-height:280px}
  .ventajas-grid{grid-template-columns:repeat(4,1fr)}
  .proceso-grid{grid-template-columns:1.7fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js [data-reveal]{opacity:1;transform:none}
  .btn:hover,.tile:hover{transform:none}
}
.portada .botones .btn{flex:1 1 100%;max-width:100%;min-width:0;white-space:normal}.botones .btn{max-width:100%;min-width:0}@media (min-width:600px){.portada .botones .btn{flex:1 1 230px}}
.portada-grid,.contacto-grid,.faq-grid,.pie-grid{grid-template-columns:minmax(0,1fr)}.portada-grid>*,.contacto-grid>*,.faq-grid>*,.pie-grid>*{min-width:0}.btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}.botones{max-width:100%}@media (min-width:960px){.portada-grid{grid-template-columns:1.05fr 1fr}.faq-grid{grid-template-columns:1fr 1.5fr}.contacto-grid{grid-template-columns:1fr 1.1fr}.pie-grid{grid-template-columns:1.2fr 1fr 1fr}}