/* Portada principal; tipografía y marca compartidas en site.css. */
.portada-preview .main-nav{gap:30px}
.portada-preview .main-nav a:last-child{
  background:#087f6b;color:#fff;border-radius:30px;padding:11px 24px;
}
.portada-preview .main-nav a:last-child::after{display:none}
.portada-preview .hero{
  min-height:100svh;max-height:none;
  /* En PC, centrar el conjunto en el espacio disponible bajo el header.
     El alto sigue siendo mínimo: si falta espacio, el contenido lo amplía. */
  display:flex;align-items:center;justify-content:flex-start;
  padding:calc(var(--header-height) + clamp(24px,4svh,48px)) max(40px,calc((100% - 1320px)/2)) clamp(24px,4svh,48px);
  color:#fff;background:#153829;
}
.portada-preview .hero-image{object-position:center 35%}
.portada-preview .hero-shade{
  background:linear-gradient(90deg,rgba(4,23,17,.76),rgba(5,23,18,.57) 45%,rgba(5,23,18,.09) 78%),linear-gradient(180deg,rgba(5,18,14,.25),transparent 30%,rgba(5,18,14,.13));
}
.portada-preview .hero-content{width:100%;text-align:left}
.hero-intro{max-width:840px}
.hero-intro h1{
  margin:0 0 44px;font-size:clamp(72px,7vw,112px);
  line-height:.99;font-weight:800;letter-spacing:-.035em;
}
.hero-intro h1 span{display:block}
.hero-intro h1 span:last-child{color:#d3f6e9}
.portada-preview .hero-copy{
  max-width:780px;margin:0;color:#fff;
  font-size:clamp(21px,1.5vw,24px);font-weight:500;line-height:1.5;
  text-wrap:pretty;
}
.portada-preview .hero-actions{
  justify-content:flex-start;align-items:center;gap:26px;margin-top:28px;
}
.portada-preview .hero-actions .button{
  min-height:54px;padding:0 24px;gap:10px;font-size:20px;font-weight:700;
  color:#fff;background:#087f6b;
}
.portada-preview .hero-actions .button:hover{background:#066c5a}
.portada-preview .arrow-down{width:23px;height:23px;animation:none;stroke-width:2}
.hero-text-link{font-size:16px;font-weight:700;padding:10px 0}
.hero-text-link:hover{text-decoration:underline;text-underline-offset:5px}
.hero-guarantee{
  display:inline-flex;gap:10px;align-items:center;
  margin-top:64px;padding:10px 12px;border:1px solid rgba(255,255,255,.6);
  border-radius:12px;background:rgba(8,33,24,.16);
}
.hero-guarantee svg{
  width:40px;height:40px;flex-shrink:0;fill:none;stroke:#d3f6e9;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
}
.hero-guarantee p{margin:0;font-size:16px;line-height:1.25}
.hero-guarantee strong{display:block;font-weight:700;margin-bottom:0}
.hero-guarantee span{display:block;color:rgba(255,255,255,.9);font-weight:500}
.portada-preview .section{scroll-margin-top:88px}
.portada-preview a:focus-visible,.portada-preview button:focus-visible{outline:3px solid #49d8bd;outline-offset:5px}
@media(max-width:1120px){
  .portada-preview .menu-btn{border-radius:50%;background:rgba(255,255,255,.12)}
  .portada-preview .hero{padding-left:6vw;padding-right:6vw}
  .portada-preview .hero-image{object-position:right 35%}
  .hero-intro{max-width:740px}
}
@media(max-width:680px){
  .portada-preview .site-header{gap:12px}
  .portada-preview .menu-btn{width:36px;height:36px}
  .portada-preview .menu-icon{transform:scale(.85)}
  .portada-preview .hero{
    /* El contenido se apoya abajo sin coordenadas ni alturas fijas.
       Si no entra, la sección crece; svh evita saltos con la barra de Chrome. */
    min-height:100svh;
    padding:max(180px,24svh) 22px max(16px,calc(3svh + env(safe-area-inset-bottom)));
    align-items:flex-end;
  }
  /* Variante vertical: la cámara queda arriba, libre del texto. */
  .portada-preview .hero-image{
    top:0;height:100%;object-position:right top;
  }
  .portada-preview .hero-shade{
    background:linear-gradient(180deg,rgba(5,22,16,.3),rgba(5,22,16,.38) 20%,rgba(5,22,16,.65) 41%,rgba(5,22,16,.68) 76%,rgba(5,22,16,.5));
  }
  .portada-preview .hero-content{text-align:center}
  .hero-intro{max-width:460px;margin:0 auto}
  .hero-intro h1{font-size:clamp(40px,15.4vw,84px);line-height:1.02;letter-spacing:-.035em;margin-bottom:38px}
  .portada-preview .hero-copy{font-size:clamp(19px,5.1vw,26px);line-height:1.48;max-width:420px}
  .portada-preview .hero-actions{display:grid;grid-template-columns:auto;justify-content:center;gap:14px;margin-top:28px}
  .portada-preview .hero-actions .button{grid-column:1 / -1;justify-self:center;font-size:18px;min-height:48px;padding:0 24px;margin-bottom:3px}
  .hero-text-link{font-size:16px;padding:8px 0}
  .hero-guarantee{margin-top:30px;max-width:100%;text-align:left}
  .hero-guarantee p{font-size:15px}
  .portada-preview .section{scroll-margin-top:80px}
  /* Los accesos ya están en la portada; los flotantes aparecen al bajar. */
  .portada-preview:not(:has(.site-header.is-scrolled)) .side-actions{visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  .portada-preview{scroll-behavior:auto}
  .portada-preview .button{transition:none}
}