:root{
      --pink:#F296BD;           /* fondo */
      --yellow:#ffd465;         /* subrayado */
      --btn:#afc4ff;            /* botón */
      --ink:#121212;            /* texto oscuro */
      --white:#fff;
    }

/* Carga de la tipografía local "Gulf Display" */
@font-face {
  font-family: "Gulf Display";
  src: url("./assets/gulfs-display-normal.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
      color:var(--ink);
      background:var(--white);
    }

    .hero{
      min-height:100svh; /* usa toda la pantalla, mobile-safe */
      background:var(--pink);
      display:grid;
      grid-template-rows:auto 1fr auto;
      padding: clamp(16px, 4vw, 40px);
      position:relative;
      overflow:hidden;
    }

    /* Logo arriba izquierda */
    .brand{
      display:flex;
      flex-direction:column;
      gap:.15rem;
      line-height:1;
      letter-spacing:.02em;
      user-select:none;
      width:max-content;
    }
    .brand .top{
      font-family:"Gulf Display", system-ui;
      font-size:clamp(45px, 3.8vw, 52px);
      font-weight:400;
      color:#fff;
    }
    .brand .bottom{
      font-family:"Gulf Display", system-ui;
      font-size:clamp(16px, 2.2vw, 30px);
      font-weight:400;
      color:#fff;
    }
    .brand .heart{ color:#ff477e; }

    /* WhatsApp flotante arriba derecha */
    .wa-fab{
      position:absolute;
      top: clamp(12px, 3vw, 28px);
      right: clamp(12px, 3vw, 28px);
      width:48px; height:48px;
      border-radius:50%;
      background:#fff;
      display:grid; place-items:center;
      box-shadow:0 4px 10px rgba(0,0,0,.15);
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .wa-fab:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.18); }
    .wa-fab svg{ width:26px; height:26px; }

    /* Centro: titulares */
    .hero-center{
      place-items:center;
      text-align:center;
      padding-top: 4rem;

    }
    .headline{
      font-family:"Gulf Display", system-ui;
      color:#fff;
      font-size: 4rem;
      font-weight:400;
      line-height:.95;
      margin:0 0 .35em;
      text-wrap:balance;
    }
    .sub{
      display:inline-block;
      font-family:"Covered By Your Grace", cursive;
      font-weight:400;
      font-size: 3rem;
      letter-spacing:.02em;
      line-height:1.1;
      color:#fff;
      position:relative;
      padding:.08em .em;
      z-index:0;
    }
    /* “resaltador” amarillo detrás del texto */
    .sub::before{
      content:"";
      position:absolute;
      inset:auto .15em .1em .15em;
      height:.55em;
      background:var(--yellow);
      z-index:-1;
      border-radius:.12em;
    }

    /* Botón */
    .cta-wrap{ margin-top: clamp(5rem, 3vw, 28px); }
    .cta{
      
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.9rem 1.4rem;
      font-family:"Inter", system-ui;
      font-weight:800;
      background:var(--btn);
      color:#0f1730;
      border:3px solid #0f1730;
      border-radius:999px;
      text-decoration:none;
      box-shadow: inset 0 -3px rgba(0,0,0,.08);
      transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
    }
    .cta svg{ width:20px; height:20px; }
    .cta:hover{ transform:translateY(-1px); filter:brightness(1.04); }
    .cta:active{ transform:translateY(0); }

    /* Footer espaciador blanco inferior (como en tu diseño) */
    .hero-footer{
      height: clamp(18px, 4vw, 36px);
      background:var(--white);
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      margin-inline: clamp(6px, 2vw, 14px);
    }

    /* Accesibilidad y preferencias */
    @media (prefers-reduced-motion: reduce){
      .cta, .wa-fab{ transition:none }
      
    }