@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-400.woff2") format("woff2");
}

:root {
  --fondo: #f7f5f0;
  --blanco: #ffffff;
  --texto: #14213d;
  --principal: #2b4c7e;
  --principal-oscuro: #1e3a63;
  --ocre: #f2b134;
  --ocre-oscuro: #d99a1e;
  --error: #b3261e;
  --ok-fondo: #e6f4ea;
  --ok-texto: #14532d;
  --borde: rgba(20, 33, 61, 0.14);
  --radio: 14px;
  --cabecera: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html, body { overflow-x: clip; }
body {
  margin: 0;
  padding-top: var(--cabecera);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.98rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a { color: var(--principal); }
a:hover { color: var(--principal-oscuro); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--principal);
  outline-offset: 2px;
  border-radius: 6px;
}
h1, h2, h3, .logo {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw + 1rem, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw + 0.6rem, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.4rem); }
p { margin: 0 0 1rem; overflow-wrap: break-word; }
section[id], footer[id] { scroll-margin-top: calc(var(--cabecera) + 16px); }
[hidden] { display: none !important; }

/* Enlace de salto */
.salto {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 300;
  background: var(--texto);
  color: var(--fondo);
  padding: 0.75rem 1.1rem;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-weight: 700;
}
.salto:focus { top: 0; color: var(--fondo); }

/* Contenedor: máx ~1120px, 20px laterales */
.envoltura {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Cabecera fija */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  min-height: var(--cabecera);
  z-index: 200;
  background: rgba(247, 245, 240, 0.97);
  border-bottom: 1px solid var(--borde);
}
.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--cabecera);
}
.logo {
  font-size: 1.45rem;
  color: var(--texto);
  text-decoration: none;
  margin: 0;
  white-space: nowrap;
}
.menu-boton {
  min-width: 44px;
  min-height: 44px;
  padding: 0.6rem 1rem;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
  background: transparent;
  border: 2px solid var(--principal);
  border-radius: 10px;
  cursor: pointer;
}
.menu-boton:hover { background: rgba(43, 76, 126, 0.08); }
.menu {
  position: fixed;
  top: var(--cabecera);
  left: 0; right: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0.5rem 20px 1.25rem;
  list-style: none;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 14px 28px rgba(20, 33, 61, 0.12);
}
.menu.abierto { display: flex; }
.menu li { margin: 0; }
.menu a:not(.btn-primario) {
  display: block;
  min-height: 44px;
  line-height: 44px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--borde);
}
.menu a:not(.btn-primario):hover { color: var(--principal); }
.menu .btn-primario { margin-top: 0.9rem; }
.btn-menu { scroll-margin-top: calc(var(--cabecera) + 16px); }

/* Botones */
.btn-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  background: var(--ocre);
  color: var(--texto);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primario:hover {
  background: var(--ocre-oscuro);
  color: var(--texto);
  transform: translateY(-1px);
}
button.btn-primario { font: inherit; font-weight: 700; width: 100%; }
.enlace-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  border: 2px solid var(--principal);
  color: var(--principal);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.enlace-secundario:hover { background: rgba(43, 76, 126, 0.08); color: var(--principal-oscuro); }

/* Portada */
.portada { padding: 2.5rem 0 3rem; }
.portada-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.portada-rejilla > *, .rejilla-dos > *, .tarjeta, .pasos li { min-width: 0; }
.portada-texto { min-width: 0; }
.subtitulo {
  font-size: clamp(1.1rem, 1rem + 1vw, 1.35rem);
  max-width: 34rem;
}
.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.5rem 0 1rem;
}
.microcopy { font-size: 0.95rem; max-width: 34rem; }
.portada-foto { overflow: hidden; border-radius: 16px; box-shadow: 0 12px 32px rgba(20, 33, 61, 0.14); }
.portada-foto img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* Secciones */
.seccion { padding: 3.5rem 0; background: var(--fondo); }
.seccion-alt { background: var(--blanco); }
.seccion > .envoltura > h2:first-child { margin-bottom: 0.75rem; }
.seccion > .envoltura > p:nth-of-type(1) { max-width: 44rem; }
.rejilla-dos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.rejilla-dos img { border-radius: var(--radio); }

/* Tarjetas */
.tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.06);
}
.seccion-alt .tarjeta { background: var(--fondo); }
.tarjeta h3 { color: var(--principal); margin-bottom: 0.6rem; }
.tarjeta p:last-child { margin-bottom: 0; }

/* Precios */
.precios dl { margin: 1rem 0; }
.precios dl div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--borde);
}
.precios dt { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.precios dd { margin: 0; font-weight: 500; }
.precios dl div:first-child dd {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 1.6rem;
  color: var(--principal);
}
.nota-precios {
  margin-top: 1.75rem;
  padding: 1rem 1.2rem;
  background: rgba(43, 76, 126, 0.08);
  border-radius: 12px;
  max-width: 44rem;
}

/* Pasos */
.pasos {
  counter-reset: paso;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.pasos li {
  counter-increment: paso;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.4rem 1.4rem 1.2rem 4.4rem;
  position: relative;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 1.2rem; top: 1.3rem;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--principal);
  color: var(--fondo);
  font-weight: 700;
  font-size: 1.2rem;
}
.pasos h3 { margin-bottom: 0.4rem; }
.pasos p:last-child { margin-bottom: 0; }

/* Contacto */
.contacto-datos { font-style: normal; margin: 1.5rem 0; }
.contacto-datos p { margin-bottom: 0.4rem; }
.contacto-datos a { overflow-wrap: anywhere; }
.mapa-enlace {
  display: block;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.mapa-enlace img { width: 100%; }
.mapa-enlace span { display: block; padding: 0.7rem 1rem; background: var(--blanco); }
.foto-contacto { border-radius: var(--radio); margin-top: 0.5rem; }

/* Formulario */
form#consulta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.06);
}
.campo { margin-bottom: 1.2rem; }
.campo label { display: block; margin-bottom: 0.35rem; font-weight: 700; }
.campo input[type="text"], .campo input[type="tel"],
.campo input[type="email"], .campo select {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  font: inherit;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid rgba(20, 33, 61, 0.35);
  border-radius: 10px;
}
.campo input:focus, .campo select:focus { border-color: var(--principal); }
.campo input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.campo-check { display: flex; align-items: flex-start; gap: 0.7rem; }
.campo-check input {
  width: 24px; height: 24px;
  min-width: 24px;
  margin-top: 0.15rem;
  accent-color: var(--principal);
}
.campo-check label { font-weight: 400; font-size: 0.98rem; }
.error { color: var(--error); font-size: 0.92rem; margin: 0.35rem 0 0; font-weight: 500; }
.confirmacion {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: var(--ok-fondo);
  color: var(--ok-texto);
  font-weight: 700;
}

/* Pie */
.pie { background: var(--texto); color: var(--fondo); padding: 2.75rem 0 2rem; }
.pie .logo { color: var(--fondo); }
.pie a { color: var(--fondo); }
.pie a:focus-visible { outline-color: var(--ocre); }
.pie-interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie-legal a, .pie-interior a { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 560px) {
  .portada-acciones .btn-primario, .portada-acciones .enlace-secundario { flex: 1 1 100%; }
}

@media (min-width: 768px) {
  .portada { padding: 4rem 0 4.5rem; }
  .portada-rejilla { grid-template-columns: 1.02fr 0.98fr; gap: 2.75rem; }
  .portada-foto img { height: 540px; max-height: 70vh; }
  .seccion { padding: 5rem 0; }
  .rejilla-dos { grid-template-columns: 1fr 1fr; gap: 2.75rem; align-items: center; }
  #contacto .rejilla-dos { align-items: start; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .tarjetas.precios { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: 1fr; }
  /* Los pasos viven en media columna: siempre apilados */
  #como-trabajamos .pasos { grid-template-columns: 1fr; }
  #como-trabajamos .pasos li { padding: 1.4rem 1.4rem 1.2rem 4.4rem; }
  .pie-interior { grid-template-columns: 1fr 1fr; align-items: center; }
  .pie-legal { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  .menu-boton { display: none; }
  .menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.7rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .menu a:not(.btn-primario) { border: 0; line-height: 1.4; min-height: 44px; display: inline-flex; align-items: center; }
  .menu .btn-primario { margin-top: 0; padding: 0.65rem 1.2rem; }
  .seccion { padding: 5.5rem 0; }
}

/* ANIM1: hero + reveals, CSS puro, sin JS */
:root{--ease-out:cubic-bezier(.215,.61,.355,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.76,0,.24,1);--ease-back:cubic-bezier(.34,1.56,.64,1)}
.ht .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.ht .w>span{display:inline-block;will-change:transform;animation:k1 .9s var(--ease-expo) both;animation-delay:calc(200ms + var(--i,0)*70ms)}
@keyframes k1{from{transform:translateY(110%)}to{transform:translateY(0)}}
.ht .ac{color:var(--principal)}
.fa{position:relative;display:inline-block}
.fa .sub{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.24em;overflow:visible}
.fa .sub path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:k2 .9s var(--ease-expo) forwards;animation-delay:1s}
@keyframes k2{0%{stroke-dashoffset:1;opacity:0}15%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.as{animation:k3 .8s var(--ease-out) both;animation-delay:.7s}
.am{animation:k3 .8s var(--ease-out) both;animation-delay:.82s}
@keyframes k3{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.portada-acciones .btn-primario,.portada-acciones .enlace-secundario{animation:k4 .7s var(--ease-back) backwards}
.portada-acciones .btn-primario{animation-delay:.95s;position:relative;overflow:hidden;isolation:isolate}
.portada-acciones .enlace-secundario{animation-delay:1.07s}
@keyframes k4{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.portada-acciones .btn-primario::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ocre-oscuro);transform:translateY(101%);transition:transform .45s var(--ease-expo)}
.portada-acciones .btn-primario:hover::before{transform:none}
.portada-acciones .btn-primario::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;opacity:0;background:linear-gradient(105deg,transparent,#ffffff99,transparent);transform:translateX(-180%) skewX(-18deg);animation:k5 1s var(--ease-out) 1.4s 1;pointer-events:none}
.portada-acciones .btn-primario:hover::after{animation:k5 .9s var(--ease-out) 1}
@keyframes k5{0%{opacity:1;transform:translateX(-180%) skewX(-18deg)}100%{opacity:1;transform:translateX(320%) skewX(-18deg)}}
.portada-acciones .enlace-secundario::after{content:"\2192";margin-left:.5rem;transition:transform .3s var(--ease-out)}
.portada-acciones .enlace-secundario:hover::after{transform:translateX(4px)}
.portada-foto{position:relative;animation:k6 1.2s var(--ease-inout) .15s both}
@keyframes k6{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.portada-foto img{animation:k7 1.6s var(--ease-expo) .15s both,k8 16s ease-in-out 1.9s infinite alternate}
@keyframes k7{from{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes k8{from{transform:scale(1)}to{transform:scale(1.045)}}
.portada-foto::after{content:"";position:absolute;inset:12px;border:1px solid #2b4c7e59;border-radius:10px;pointer-events:none;animation:k6 1s var(--ease-out) .9s both}
.hc{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.hc li{position:absolute;max-width:70%;background:#fffffff0;color:var(--texto);font-size:.85rem;font-weight:700;padding:.5rem .9rem;border:1px solid var(--borde);border-radius:999px;box-shadow:0 8px 20px #14213d2e}
.hc li:first-child{top:14px;left:14px;animation:k9 .6s var(--ease-back) 1.2s both,k0 7s ease-in-out 2.1s infinite alternate}
.hc li+li{bottom:14px;right:14px;animation:k9 .6s var(--ease-back) 1.4s both,k0 8s ease-in-out 2.3s infinite alternate}
@keyframes k9{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes k0{from{transform:translateY(-5px)}to{transform:translateY(6px)}}
.sh{display:flex;justify-content:center;margin:2.2rem 0 0}
.sh span{display:block;width:2px;height:56px;background:#2b4c7e2e;position:relative;overflow:hidden}
.sh span::before{content:"";position:absolute;inset:0;background:var(--principal);animation:ka 2.4s ease-in-out infinite}
@keyframes ka{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:767px){.sh{display:none}}
.tarjeta{position:relative;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.tarjeta:hover{transform:translateY(-4px);box-shadow:0 14px 30px #14213d1f}
.tarjeta::before{content:"";position:absolute;top:-1px;left:1.4rem;right:1.4rem;height:3px;border-radius:3px;background:var(--principal);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease-out)}
.tarjeta:hover::before{transform:scaleX(1)}
.pg{display:none}
@supports (animation-timeline:scroll()){
.pg{display:block;position:fixed;top:0;left:0;right:0;height:2px;z-index:250;background:var(--principal);transform:scaleX(0);transform-origin:0 50%;animation:kb linear both;animation-timeline:scroll(root)}
@keyframes kb{to{transform:scaleX(1)}}
.cabecera{animation:kc linear both;animation-timeline:scroll(root);animation-range:0 120px}
@keyframes kc{to{box-shadow:0 10px 28px #14213d29}}
.portada-foto{animation:k6 1.2s var(--ease-inout) .15s both,kd 1ms linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 60vh}
@keyframes kd{from{translate:0 0}to{translate:0 40px}}
.portada-texto{animation:ke linear both;animation-timeline:scroll(root);animation-range:exit 0% exit 100%}
@keyframes ke{to{opacity:.2;translate:0 -30px}}
}
@supports (animation-timeline:view()){
.seccion h2{animation:kf linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
@keyframes kf{from{clip-path:inset(0 0 100% 0);transform:translateY(22px)}to{clip-path:inset(0);transform:none}}
.seccion>.envoltura>p,.rejilla-dos>div{animation:kg linear both;animation-timeline:view();animation-range:entry 10% entry 55%}
@keyframes kg{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.tarjeta,.pasos li{animation:kg linear backwards;animation-timeline:view();animation-range:entry 8% entry 53%}
.tarjetas .tarjeta:nth-child(2),.pasos li:nth-child(2){animation-range:entry 13% entry 58%}
.tarjetas .tarjeta:nth-child(3),.pasos li:nth-child(3){animation-range:entry 18% entry 63%}
.rejilla-dos img,.mapa-enlace img,.foto-contacto{animation:k6 linear backwards,kh linear backwards;animation-timeline:view(),view();animation-range:entry 0% entry 60%,entry 0% entry 80%}
@keyframes kh{from{transform:scale(1.12)}to{transform:scale(1)}}
.pasos li::before{animation:ki linear backwards;animation-timeline:view();animation-range:entry 20% entry 60%}
@keyframes ki{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
.pasos{position:relative}
.pasos::after{content:"";position:absolute;top:8px;bottom:8px;left:calc(1.2rem + 21px);width:2px;background:#2b4c7e59;transform:scaleY(0);transform-origin:50% 0;animation:kj linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
@keyframes kj{to{transform:scaleY(1)}}
}
/* ANIM2: separar hero + footer nuevo, CSS puro, 0 JS */
.portada{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7f5f0 0%,#edf1f8 70%,#e8eef7 100%);border-radius:0 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px);box-shadow:0 1px 0 rgba(20,33,61,.06),0 18px 40px -28px rgba(20,33,61,.25)}
.portada-rejilla{position:relative;z-index:1}
.mancha{position:absolute;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(43,76,126,.08) 0%,rgba(43,76,126,0) 70%)}
.mancha-a{width:min(560px,80vw);height:min(560px,80vw);top:-140px;right:-120px;animation:km1 22s ease-in-out infinite alternate}
.mancha-b{width:min(460px,70vw);height:min(460px,70vw);bottom:-180px;left:-140px;animation:km2 18s ease-in-out infinite alternate}
@keyframes km1{from{transform:translate(0,0)}to{transform:translate(-46px,38px)}}
@keyframes km2{from{transform:translate(0,0)}to{transform:translate(40px,-34px)}}
.cinta{background:#14213d;color:#f7f5f0;overflow:hidden;min-height:56px;display:flex;align-items:center}
.cinta-pista{display:flex;width:max-content;animation:km3 90s linear infinite;will-change:transform}
.cinta-pista span{white-space:nowrap;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;line-height:56px;padding-right:.5rem}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-pista b{font-weight:inherit}
@keyframes km3{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.etiqueta{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2b4c7e;margin:0 0 .6rem}
#para-quien{background:#fff;padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(72px,10vw,140px)}
#servicios{background:var(--fondo)}
#servicios .tarjeta{background:#fff}
#como-trabajamos{background:#fff}
#como-trabajamos .pasos li{background:var(--fondo)}
#precios{background:var(--fondo)}
#precios .tarjeta{background:#fff}
#contacto{background:#e8eef7}
.pie{background:#14213d;color:#f7f5f0;border-radius:32px 32px 0 0;overflow:hidden;padding:3.5rem 0 0}
.pie-cta{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center;padding-bottom:2.25rem;border-bottom:1px solid rgba(247,245,240,.16)}
.pie-cta-titulo{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(1.7rem,3vw + 1rem,2.4rem);line-height:1.15;margin:0 0 .5rem;color:#f7f5f0}
.pie-cta-texto p{margin:0;max-width:32rem;color:#f7f5f0}
.pie-cta-boton{margin:0}
.pie-cta .btn-primario{position:relative;overflow:hidden;isolation:isolate;color:#14213d}
.pie-cta .btn-primario:hover{color:#14213d}
.pie-cta .btn-primario::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ocre-oscuro);transform:translateY(101%);transition:transform .45s var(--ease-out)}
.pie-cta .btn-primario:hover::before{transform:none}
.pie-cta .btn-primario::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;opacity:0;background:linear-gradient(105deg,transparent,#ffffff99,transparent);transform:translateX(-180%) skewX(-18deg);animation:k5 1s var(--ease-out) 1.4s 1;pointer-events:none}
.pie-cta .btn-primario:hover::after{animation:k5 .9s var(--ease-out) 1}
.pie-rejilla{display:grid;grid-template-columns:1fr;gap:2rem;padding-block:2.5rem 1rem}
.pie-col{min-width:0}
.pie-logo{font-family:"DM Serif Display",Georgia,serif;font-size:1.6rem;margin:0 0 .75rem;color:#f7f5f0}
.pie-marca p{max-width:24rem}
.pie-titulo{font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#f7f5f0;margin:0 0 .9rem}
.pie-titulo::after{content:"";display:block;width:28px;height:2px;margin-top:.5rem;background:var(--ocre);border-radius:2px}
.pie-lista{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pie-chips{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.pie-chips li{font-size:.85rem;font-weight:500;border:1px solid rgba(247,245,240,.28);border-radius:999px;padding:.4rem .85rem;transition:transform .3s var(--ease-out)}
.pie-chips li:hover{transform:translateY(-2px)}
.pie a{color:#f7f5f0;text-decoration:none;position:relative}
.pie-lista a,.pie-contacto a,.pie-legal a,.pie-arriba{display:inline-flex;align-items:center;min-height:44px;padding:.2rem 0}
.pie-lista a::after,.pie-contacto a::after,.pie-legal a::after,.pie-arriba::after{content:"";position:absolute;left:0;bottom:8px;height:2px;width:100%;background:var(--ocre);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease-out)}
.pie-lista a:hover,.pie-contacto a:hover,.pie-legal a:hover,.pie-arriba:hover{color:#fff}
.pie-lista a:hover::after,.pie-contacto a:hover::after,.pie-legal a:hover::after,.pie-arriba:hover::after{transform:scaleX(1)}
.pie-contacto{font-style:normal;margin:0}
.pie-contacto p{margin:0 0 .15rem}
.pie-contacto a{overflow-wrap:anywhere}
.pie-mini{display:flex;align-items:center;gap:.6rem;background:rgba(247,245,240,.08);border:1px solid rgba(247,245,240,.16);border-radius:12px;padding:.8rem 1rem;margin-top:1rem;max-width:22rem}
.punto{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:#4ade80}
.punto::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4ade80;opacity:.5;animation:km4 2.4s ease-out infinite}
@keyframes km4{from{transform:scale(1);opacity:.5}to{transform:scale(1.8);opacity:0}}
.pie-gigante{display:block;width:100%;height:auto;margin:1.5rem 0 -.22em;user-select:none;pointer-events:none;overflow:hidden}
.pie-gigante text{font-family:"DM Serif Display",Georgia,serif;font-size:160px;fill:rgba(247,245,240,.06);stroke:rgba(247,245,240,.18);stroke-width:1}
.pie-barra{border-top:1px solid rgba(247,245,240,.16);margin-top:0}
.pie-barra-interior{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;padding-top:1.1rem;padding-bottom:1.4rem;font-size:.875rem}
.pie-barra-interior p{margin:0}
.pie-legal{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;list-style:none;margin:0;padding:0}
.pie-arriba span{display:inline-block;transition:transform .3s var(--ease-out)}
.pie-arriba:hover span{transform:translateY(-3px)}
@media(min-width:768px){
.pie-rejilla{grid-template-columns:1fr 1fr}
.pie-cta{grid-template-columns:1.4fr 1fr}
.pie-cta-boton{justify-self:end}
}
@media(min-width:1024px){
.pie-rejilla{grid-template-columns:1.3fr 1fr 1fr 1fr}
.pie-barra-interior{flex-wrap:nowrap}
.pie-barra-interior .pie-legal{margin-left:auto}
}
@supports (animation-timeline:view()){
.pie-rejilla .pie-col{animation:km6 linear backwards;animation-timeline:view();animation-range:entry 5% entry 45%}
.pie-rejilla .pie-col:nth-child(2){animation-range:entry 10% entry 50%}
.pie-rejilla .pie-col:nth-child(3){animation-range:entry 15% entry 55%}
.pie-rejilla .pie-col:nth-child(4){animation-range:entry 20% entry 60%}
.pie-cta{animation:km6 linear backwards;animation-timeline:view();animation-range:entry 0% entry 40%}
@keyframes km6{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pie-gigante{animation:km5 linear backwards;animation-timeline:view();animation-range:entry 0% entry 60%}
@keyframes km5{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.ht .w>span,.fa .sub path,.as,.am,.portada-acciones .btn-primario,.portada-acciones .enlace-secundario,.portada-acciones .btn-primario::after,.portada-foto,.portada-foto img,.portada-foto::after,.hc li,.sh span::before,.pg,.cabecera,.portada-texto,.seccion h2,.seccion>.envoltura>p,.rejilla-dos>div,.tarjeta,.pasos li,.rejilla-dos img,.mapa-enlace img,.foto-contacto,.pasos li::before,.pasos::after{animation:none!important}
.fa .sub path{stroke-dashoffset:0!important;opacity:1!important}
.pasos::after{transform:none!important}
.pg,.sh{display:none!important}
.mancha,.cinta-pista,.punto::after,.pie-cta .btn-primario::after,.pie-rejilla .pie-col,.pie-cta,.pie-gigante{animation:none!important}
.mancha{display:none}
.cinta{justify-content:center}
.cinta-pista{width:auto;animation:none;justify-content:center}
.cinta-pista span+span{display:none}
.cinta-pista span{line-height:56px;white-space:normal;text-align:center;font-size:0;padding:0}
.cinta-pista span b{font-size:.9rem;font-weight:400}
.pie-chips li,.pie-cta .btn-primario::before{transition:none}
.pie-arriba span{transition:none}
}
/* Servicios: tarjetas con icono y número */
#servicios .servicio{overflow:hidden;border:1px solid #2b4c7e1f;border-radius:20px;padding:2rem 1.6rem 1.8rem;box-shadow:0 1px 2px #14213d0d,0 8px 24px #14213d0f;background:linear-gradient(180deg,#fff 60%,#f3f6fb)}
#servicios .servicio::after{content:attr(data-n);position:absolute;top:.6rem;right:1.1rem;font-family:"DM Serif Display",serif;font-size:4.5rem;line-height:1;color:#2b4c7e;opacity:.1;pointer-events:none;transition:transform .35s var(--ease-out),opacity .35s var(--ease-out)}
#servicios .servicio:hover::after{transform:translateY(-4px);opacity:.14}
#servicios .servicio:hover{border-color:#2b4c7e40}
.icono-caja{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#e8eef7;color:#2b4c7e;margin-bottom:1.2rem;transition:background-color .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out)}
#servicios .servicio:hover .icono-caja{background:#2b4c7e;color:#fff;transform:rotate(-6deg)}
#servicios .servicio h3{font-size:1.4rem}
@media (prefers-reduced-motion:reduce){#servicios .servicio::after,.icono-caja{transition:none}#servicios .servicio:hover .icono-caja{transform:none}}
.icono-caja .icono{width:28px;height:28px;flex:none}
/* Cómo trabajamos: pasos que se colorean al hacer scroll + foto a la altura de los pasos con parallax */
.como-rejilla{display:grid;gap:1.75rem;margin-top:1.75rem}
.como-rejilla .pasos{margin-top:0}
.como-foto{position:relative;overflow:hidden;border-radius:var(--radio);aspect-ratio:4/3;box-shadow:0 18px 40px -24px #14213d59}
.como-foto img{position:absolute;inset:-7% 0;width:100%;height:114%;max-width:none;object-fit:cover;border-radius:0}
.como-foto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #14213d14;background:linear-gradient(180deg,transparent 55%,#14213d33);pointer-events:none}
@media (min-width:1024px){
.como-rejilla{grid-template-columns:1fr 1fr;gap:2.75rem;align-items:stretch}
.como-foto{aspect-ratio:auto;min-height:100%}
}
#como-trabajamos .pasos::after{display:none}
#como-trabajamos .pasos li::before{z-index:2}
#como-trabajamos .pasos li:nth-child(1){z-index:3}#como-trabajamos .pasos li:nth-child(2){z-index:2}#como-trabajamos .pasos li:nth-child(3){z-index:1}
/* Línea por tramos: de cada círculo al siguiente; gris de base y azul que se rellena */
#como-trabajamos .pasos li:not(:last-child)::after{content:"";position:absolute;z-index:1;left:calc(1.2rem + 21px);top:calc(1.3rem + 44px);bottom:calc(-1.25rem - 1.3rem);width:2px;border-radius:2px;background:linear-gradient(var(--principal),var(--principal)) no-repeat 0 0/100% 100%,#2b4c7e26}
@supports (animation-timeline:view()){
#como-trabajamos .pasos li:not(:last-child)::after{background-size:100% 0%,auto;animation:krelleno linear both;animation-timeline:view();animation-range:cover 40% cover 58%}
@keyframes krelleno{to{background-size:100% 100%,auto}}
#como-trabajamos .pasos li::before{background:#fff;color:#2b4c7e;box-shadow:inset 0 0 0 2px #2b4c7e40;animation:kpaso linear both;animation-timeline:view();animation-range:cover 35% cover 45%}
@keyframes kpaso{to{background:#2b4c7e;color:#f7f5f0;box-shadow:inset 0 0 0 2px #2b4c7e,0 0 0 6px #2b4c7e1f}}
.como-foto{view-timeline:--foto block}
.como-foto img{animation:kparallax linear both;animation-timeline:--foto;animation-range:cover 0% cover 100%}
.como-foto{animation:k6 linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes kparallax{from{transform:translateY(-5%) scale(1.04)}to{transform:translateY(5%) scale(1)}}
}
@media (prefers-reduced-motion:reduce){
#como-trabajamos .pasos li::before,#como-trabajamos .pasos li::after,.como-foto,.como-foto img{animation:none!important}
#como-trabajamos .pasos li::before{background:#2b4c7e;color:#f7f5f0}
#como-trabajamos .pasos li:not(:last-child)::after{background-size:100% 100%,auto}
.como-foto img{transform:none}
}
/* Precios: sección estrecha y centrada, precio protagonista, plan destacado en azul noche */
#precios .envoltura{max-width:calc(800px + 40px)}
#precios h2,#precios .envoltura>p{text-align:center;margin-inline:auto}
#precios .envoltura>p:not(.nota-precios){max-width:36rem}
#precios .tarjetas.precios{gap:1.5rem;margin-top:2.25rem;align-items:stretch}
#precios .plan{display:flex;flex-direction:column;padding:2.1rem 1.8rem 1.8rem;border:1px solid #2b4c7e1f;border-radius:24px;background:#fff;box-shadow:0 1px 2px #14213d0d,0 14px 34px -18px #14213d33;overflow:hidden;isolation:isolate}
#precios .plan::before{display:none}
#precios .plan h3{font-size:1.15rem;font-family:"DM Sans",system-ui,sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--principal);margin:0}
#precios .plan dl{margin:1.1rem 0 1.6rem;flex:1}
#precios .plan dl div{border-top:0;padding:0}
#precios .plan dl div:first-child{padding-bottom:1.3rem;margin-bottom:1.3rem;border-bottom:1px solid #2b4c7e1f}
#precios .plan dl div:first-child dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#precios .plan dl div:first-child dd{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .4rem;font-family:"DM Sans",system-ui,sans-serif;font-size:1rem;color:inherit}
#precios .importe{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(3rem,7vw,3.75rem);line-height:1;color:#14213d;letter-spacing:-.01em}
#precios .periodo,#precios .desde{font-weight:500;color:#4a5568}
#precios .desde{width:100%;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
#precios .plan dl div:last-child dt{margin-bottom:.5rem}
#precios .plan dl div:last-child dd{position:relative;padding-left:2rem;line-height:1.55}
#precios .plan dl div:last-child dd::before{content:"";position:absolute;left:0;top:.15rem;width:1.35rem;height:1.35rem;border-radius:50%;background:#e8eef7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b4c7e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat}
#precios .plan p{margin:0}
#precios .plan .btn-primario{display:flex;justify-content:center;width:100%}
#precios .plan:not(.plan-destacado) .btn-primario{background:transparent;color:var(--principal);box-shadow:inset 0 0 0 2px var(--principal)}
#precios .plan:not(.plan-destacado) .btn-primario:hover{background:var(--principal);color:#fff}
/* Destacado */
#precios .plan-destacado{background:#14213d;color:#f7f5f0;border-color:#14213d;box-shadow:0 30px 60px -30px #14213d99}
#precios .plan-destacado::after{content:"";position:absolute;z-index:-1;width:320px;height:320px;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(circle,#2b4c7ecc,transparent 70%);pointer-events:none}
#precios .plan-destacado h3{color:#c9d6ea}
#precios .plan-destacado .importe{color:#fff}
#precios .plan-destacado .periodo,#precios .plan-destacado .desde{color:#c9d6ea}
#precios .plan-destacado dl div:first-child{border-color:#f7f5f029}
#precios .plan-destacado dt{opacity:1;color:#c9d6ea}
#precios .plan-destacado dl div:last-child dd::before{background-color:#2b4c7e;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
#precios .plan:hover{transform:translateY(-6px)}
#precios .plan-destacado:hover{box-shadow:0 36px 70px -30px #14213db3}
#precios .nota-precios{font-size:14px;max-width:none;margin-top:1.75rem;text-align:center;background:transparent;border:1px dashed #2b4c7e4d;border-radius:14px}
@media (min-width:1024px){#precios .plan-destacado{transform:translateY(-10px)}#precios .plan-destacado:hover{transform:translateY(-16px)}}
/* Entrada ligada al scroll: cada tarjeta llega desde su lado */
@supports (animation-timeline:view()){
#precios .plan{animation:kplan-i linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
#precios .plan-destacado{animation-name:kplan-d}
@keyframes kplan-i{from{opacity:0;transform:translateX(-40px) rotate(-2deg) scale(.96)}}
@keyframes kplan-d{from{opacity:0;transform:translateX(40px) rotate(2deg) scale(.96)}}
#precios .plan-destacado::after{animation:kbrillo linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes kbrillo{from{transform:translate(40px,-30px)}to{transform:translate(-60px,60px)}}
}
@media (prefers-reduced-motion:reduce){#precios .plan,#precios .plan::after{animation:none!important;transition:none}#precios .plan:hover,#precios .plan-destacado:hover{transform:none}}
/* Contacto: el mapa rellena la columna hasta el final del formulario (escritorio) */
@media (min-width:1024px){
#contacto .rejilla-dos{align-items:stretch}
#contacto .rejilla-dos>div:first-child{display:flex;flex-direction:column}
#contacto .mapa-enlace{flex:1;display:flex;flex-direction:column;min-height:220px;margin-bottom:0}
#contacto .mapa-enlace img{flex:1 1 0;min-height:0;width:100%;height:0;object-fit:cover}
}
.como-foto img{object-position:50% 50%}
/* Menú móvil: hamburguesa de 3 barras a la derecha, se convierte en X; panel con despliegue animado */
@media (max-width:1023.98px){
.cabecera-interior{justify-content:flex-start}
.menu-boton{order:2;margin-left:auto;margin-right:-10px;width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;transition:background-color .25s var(--ease-out)}
.cabecera-interior>nav{order:3;margin-left:-1rem}
.barras{position:relative;display:block;width:24px;height:16px}
.barras span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--texto);transition:transform .4s var(--ease-out),opacity .25s var(--ease-out),width .3s var(--ease-out)}
.barras span:nth-child(1){top:0}
.barras span:nth-child(2){top:7px;width:70%;left:auto;right:0}
.barras span:nth-child(3){top:14px}
.menu-boton:hover .barras span:nth-child(2){width:100%}
.menu-boton[aria-expanded="true"] .barras span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .barras span:nth-child(2){opacity:0;transform:translateX(8px)}
.menu-boton[aria-expanded="true"] .barras span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{display:flex;visibility:hidden;opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease-out),opacity .3s var(--ease-out),transform .45s var(--ease-out),visibility 0s linear .45s}
.menu.abierto{visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 -40px 0);transition:clip-path .5s var(--ease-out),opacity .3s var(--ease-out),transform .5s var(--ease-out),visibility 0s}
.menu li{opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.menu.abierto li{opacity:1;transform:none;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.menu.abierto li:nth-child(1){transition-delay:.08s}
.menu.abierto li:nth-child(2){transition-delay:.13s}
.menu.abierto li:nth-child(3){transition-delay:.18s}
.menu.abierto li:nth-child(4){transition-delay:.23s}
.menu.abierto li:nth-child(5){transition-delay:.28s}
}
@media (max-width:1023.98px) and (prefers-reduced-motion:reduce){
.barras span,.menu,.menu.abierto,.menu li,.menu.abierto li{transition:none!important;transition-delay:0s!important}
.menu{clip-path:none;transform:none}
}
.pie-barra{margin-top:3rem}