@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/libre-caslon-display-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/libre-caslon-display-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sacramento-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sacramento-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/work-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/work-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/work-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/work-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/work-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/work-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/work-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/work-sans-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
    --cream:#F4EFE6;
    --cream-2:#E8E1D3;
    --paper:#FBF9F4;
    --olive:#7C8562;
    --olive-deep:#5B6347;
    --olive-black:#2E3324;
    --wine:#6E3542;
    --wine-deep:#4E2530;
    --near-black:#2C141B;
    --taupe:#A79C8E;
    --sage:#ABAD9E;
    --gold:#B9975B;
    --gold-deep:#8E7440;
    --ink:#2B2620;
    --ink-soft:#5B5346;
    --white:#FFFFFF;
    --line: rgba(43,38,32,0.12);
    --line-light: rgba(244,239,230,0.16);
    --radius: 2px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Libre Caslon Display', serif;
    font-weight:400;
    line-height:1.12;
    margin:0;
    color:inherit;
  }
  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; }

  :focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 28px;
  }

  .logo-mark{
    border-radius:50%;
    display:block;
    flex-shrink:0;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Work Sans', sans-serif;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold-deep);
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--gold-deep);
    display:inline-block;
  }
  .on-dark .eyebrow{ color:var(--gold); }
  .on-dark .eyebrow::before{ background:var(--gold); }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 30px;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.03em;
    border-radius:var(--radius);
    border:1px solid transparent;
    transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--wine);
    color:var(--cream);
  }
  .btn-primary:hover{ background:var(--gold); color:var(--near-black); transform:translateY(-2px); }
  .btn-ghost-dark{
    border-color: rgba(244,239,230,0.4);
    color:var(--cream);
  }
  .btn-ghost-dark:hover{ border-color:var(--cream); background:rgba(244,239,230,0.08); transform:translateY(-2px); }
  .btn-ghost-light{
    border-color: rgba(43,38,32,0.25);
    color:var(--ink);
  }
  .btn-ghost-light:hover{ border-color:var(--ink); background:rgba(43,38,32,0.04); transform:translateY(-2px); }

  .seal{ display:block; }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:100;
    background:rgba(44,20,27,0.0);
    transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
  }
  header.scrolled{
    background:rgba(44,20,27,0.92);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(244,239,230,0.1);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:16px 28px;
    max-width:1180px;
    margin:0 auto;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:13px;
    color:var(--cream);
  }
  /* El logotipo completo de la marca, en imagen: mundito, MIGRACIÓN y la firma. */
  .logo-lockup{ height:48px; width:auto; display:block; }

  /* ---------- El logotipo vivo ----------
     El logotipo no se toca: el anillo de pincel y las letras se quedan quietos
     y en su sitio exacto; lo único que se mueve es el mapa de dentro del
     anillo. Las medidas salen del archivo original de 1448×589, así que basta
     estirar la caja y todo cae donde debe.

     El recorte alrededor de las letras es lo que hace que la M se lea cuando le
     pasa un continente por detrás: es el mismo margen que trae el logotipo. */
  .marca-viva{
    position:relative;
    display:block;
    width:192px;
    aspect-ratio:1448 / 589;
    flex:0 0 auto;
  }
  .marca-viva > img,
  .marca-viva > span{ position:absolute; inset:0; width:100%; height:100%; }
  .marca-viva img{ object-fit:contain; display:block; }
  .mv-mapa{
    -webkit-mask-image:url(/assets/img/mask_01.png);
            mask-image:url(/assets/img/mask_01.png);
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  }
  /* el disco del mapa, en el hueco que le deja el anillo */
  .mv-mapa canvas{
    position:absolute;
    left:4.420%; top:13.232%;
    width:29.834%; height:73.282%;
    border-radius:50%;
    display:block;
  }
  @media (max-width: 620px){
    .marca-viva{ width:150px; }
  }
  /* Y junto a él, nuestro globo, girando, sin nada encima. */
  .nav-links{
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    color:var(--cream);
    white-space:nowrap;
    font-size:14px;
    font-weight:500;
    letter-spacing:.01em;
    opacity:.86;
    position:relative;
    padding:4px 0;
    transition:opacity .3s var(--ease);
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:-2px;
    height:1px; background:var(--gold);
    transition:right .35s var(--ease);
  }
  .nav-links a:hover{ opacity:1; }
  .nav-links a:hover::after{ right:0; }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .nav-cta .btn{ padding:12px 22px; font-size:13.5px; }
  .lang-switch{
    display:flex; gap:8px;
    font-size:12.5px; font-weight:600; letter-spacing:.05em;
    color:var(--cream); opacity:.7;
  }
  .lang-switch span{ opacity:.5; }
  .burger{
    display:none;
    width:26px; height:18px;
    position:relative;
    background:none; border:none; padding:0;
  }
  .burger span{
    position:absolute; left:0; right:0; height:1.5px; background:var(--cream);
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .burger span:nth-child(1){ top:0; }
  .burger span:nth-child(2){ top:8px; }
  .burger span:nth-child(3){ top:16px; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background: radial-gradient(120% 140% at 85% 10%, #5A2E39 0%, var(--wine-deep) 46%, var(--near-black) 100%);
    color:var(--cream);
    padding:150px 0 0;
    overflow:hidden;
  }
  .hero-grid{
    max-width:1180px;
    margin:0 auto;
    padding:0 28px 110px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:2;
  }
  /* Titulillo del hero: dice de qué se trata el sitio, así que pesa más */
  .hero .hero-kicker{
    font-size:clamp(13px, 1.15vw, 15px);
    letter-spacing:.15em;
    flex-wrap:wrap;
    column-gap:9px;
    row-gap:4px;
    margin-bottom:4px;
  }
  .hero .hero-kicker::before{
    width:30px;
    background:var(--gold);
  }
  .hero-kicker .k-main{
    flex:1 1 180px;             /* que envuelva dentro de su línea, no debajo de la rayita */
    min-width:0;
    color:var(--gold);
    font-weight:700;
  }
  .hero-kicker .k-sub{
    flex-basis:100%;
    padding-left:39px;          /* alinea con el texto, no con la rayita */
    color:rgba(244,239,230,0.62);
    font-weight:500;
    letter-spacing:.13em;
  }

  @media (max-width: 620px){
    .hero .hero-kicker{ letter-spacing:.12em; }
  }

  .hero h1{
    font-size:clamp(36px, 4.6vw, 56px);
    color:var(--white);
    margin:22px 0 26px;
    max-width:15ch;
  }
  .hero .lead{
    font-size:17.5px;
    color:rgba(244,239,230,0.82);
    max-width:46ch;
    margin-bottom:36px;
  }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
  .hero-trust{ display:flex; flex-direction:column; gap:12px; margin-top:38px; }
  .hero-trust .trust-line{ display:flex; align-items:baseline; gap:10px; font-size:13.5px; color:rgba(244,239,230,0.78); }
  .hero-trust .stars{ color:var(--gold); letter-spacing:2px; font-size:14px; }

  .hero-forbes{
    display:inline-flex;
    align-items:center;
    gap:18px;
    margin-top:34px;
    padding:14px 22px 14px 0;
    border-top:1px solid rgba(244,239,230,0.18);
    border-bottom:1px solid rgba(244,239,230,0.18);
    transition:opacity .35s var(--ease);
  }
  .hero-forbes:hover{ opacity:.72; }
  .hero-forbes .label{
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold);
    white-space:nowrap;
  }
  .hero-forbes img{ height:27px; width:auto; }
  @media (max-width: 480px){
    .hero-forbes{ flex-wrap:wrap; gap:10px; }
    .hero-forbes img{ height:23px; }
  }

  .hero-person{
    display:inline-flex; align-items:center; gap:14px; margin-top:30px;
    transition:opacity .35s var(--ease);
  }
  .hero-person:hover{ opacity:.82; }
  .hero-person-avatar{
    position:relative;
    width:52px; height:52px; border-radius:50%;
    border:1px solid rgba(185,151,90,0.55);
    flex-shrink:0;
  }
  .hero-person-avatar img{
    width:100%; height:100%; border-radius:50%; object-fit:cover;
  }
  .wa-badge{
    position:absolute; right:-3px; bottom:-3px;
    width:21px; height:21px; border-radius:50%;
    background:#25D366; border:2px solid var(--near-black);
    display:flex; align-items:center; justify-content:center;
  }
  .wa-badge svg{ width:11px; height:11px; color:#fff; }
  .hero-person-text strong{ display:block; color:var(--cream); font-size:14px; font-weight:600; }
  .hero-person-text span{ display:block; font-size:12.5px; color:rgba(244,239,230,0.72); }
  .hero-person-text .rol{ color:var(--gold); font-weight:600; letter-spacing:.01em; margin-top:1px; }
  .hero-person-text .wa{ font-size:12px; color:rgba(244,239,230,0.6); margin-top:2px; }
  .hero-person:hover .hero-person-text strong{ text-decoration:underline; text-underline-offset:3px; }

  .hero-medallion{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:34px;
    position:relative;
  }

  /* Lema y firma de Edéen, bajo el globo */
  .hero-saludo{
    padding-top:34px;
    text-align:center;
    display:flex; flex-direction:column; gap:14px;
    align-items:center;
  }
  .hero-saludo .s1{
    font-family:'Libre Caslon Display', serif;
    font-size:clamp(23px, 2.1vw, 30px);
    line-height:1.26;
    color:var(--white);
    white-space:pre-line;
  }
  /* === la firma: lo genera firma.py, no se edita a mano === */
  /* La firma de Edéen ya no se compone con tipografía: es su firma de
     verdad, vectorizada (firma_edeen.py). Aquí no queda nada que cargar.
     El bloque de @font-face que había —Amsterdam y Brittany Signature,
     las dos comerciales— se retiró al hacer el cambio. */
  /* === fin de la firma === */

  /* La despedida: la frase compuesta, y debajo la firma de Edéen —la suya de
     verdad, vectorizada—. Se despide como se despide una carta. */
  .hero-saludo .s3{
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .hero-saludo .s3-txt{
    font-family:'Libre Caslon Display', serif;
    font-style:italic;
    font-size:clamp(16px, 1.15vw, 19px);
    line-height:1.4;
    letter-spacing:.02em;
    color:rgba(244,239,230,0.62);
  }
  .hero-saludo .s3-firma{
    /* Una firma va debajo de lo que firma, no compitiendo con ello: a lo ancho
       del titular se leía como un segundo título. A esta medida queda claramente
       por debajo del lema y sigue leyéndose entera. */
    width:clamp(206px, 17.5vw, 250px);
    height:auto;
    opacity:.86;
  }

  /* ---------- La portada: el logotipo, vivo y en grande ----------
     La marca es la portada. El anillo de pincel y las letras se quedan quietos
     y en su sitio; lo único que se mueve es el mundo de dentro del anillo. Todo
     lo demás cuelga debajo, centrado en una sola columna. */
  .hero-centro .hero-uno{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    padding-top:clamp(24px, 5vh, 64px);
    /* la firma trae un rasgo largo abajo: sin este aire se corta contra la
       cenefa que cierra la portada */
    padding-bottom:clamp(38px, 5vw, 72px);
  }
  .marca-viva-hero{
    width:min(720px, 84vw);
    margin-bottom:clamp(20px, 3.4vw, 38px);
  }
  .hero-centro .hero-kicker{ justify-content:center; }
  .hero-centro .hero-kicker .k-main{ flex:0 0 auto; }
  .hero-centro .hero-kicker .k-sub{
    flex:0 0 auto; padding-left:0;
  }
  .hero-centro .hero-kicker .k-sub::before{
    content:"·"; margin:0 10px; color:var(--gold); opacity:.7;
  }
  .hero-centro .hero-kicker::before{ display:none; }
  /* balance reparte las líneas parejas en vez de dejar una coja al final */
  .hero-centro h1{ max-width:30ch; text-wrap:balance; }
  .hero-centro .lead{ max-width:58ch; text-wrap:balance; }
  .hero-centro .hero-ctas{ justify-content:center; }

  .hero-avales{
    display:flex; align-items:center; justify-content:center;
    gap:clamp(20px, 3vw, 44px);
    flex-wrap:wrap;
    margin-top:38px;
  }
  .hero-centro .hero-forbes{ margin-top:0; }
  .hero-centro .hero-trust{ margin-top:0; text-align:left; }
  .hero-centro .hero-person{ margin-top:30px; }
  .hero-centro .hero-saludo{ margin-top:clamp(28px, 4vw, 52px); align-items:center; }

  @media (max-width: 900px){
    /* 100% del ancho útil, no del de la pantalla: si no, el logotipo se sale
       por los dos lados porque el contenedor ya trae su margen */
    .marca-viva-hero{ width:min(520px, 100%); }
    .hero-avales{ gap:22px; }
    .hero-centro .hero-trust{ text-align:center; }
  }

  @media (max-width: 700px){
    /* el punto de separación se quedaba colgando al principio del renglón */
    .hero-centro .hero-kicker{ flex-direction:column; row-gap:6px; }
    .hero-centro .hero-kicker .k-sub::before{ content:none; }
  }

  /* Fondo del hero: el globo de la marca, en marca de agua */
  .hero-topo{
    position:absolute; inset:0; z-index:0;
    opacity:var(--marca-agua, .028);
    background-color:var(--cream);
    -webkit-mask:url(/assets/img/mask_02.png) no-repeat var(--globo-x, 46%) center / auto var(--globo-h, 260%);
    mask:url(/assets/img/mask_02.png) no-repeat var(--globo-x, 46%) center / auto var(--globo-h, 260%);
    pointer-events:none;
  }
  /* Velo que devuelve contraste a la columna de texto sin apagar el globo */
  .hero::after{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(100deg,
      rgba(44,20,27,.2) 0%, rgba(44,20,27,.1) 26%, rgba(44,20,27,0) 48%);
  }
  .hero-grid{ position:relative; z-index:1; }
  .horizon{
    position:absolute;
    left:0; right:0; bottom:0;
    height:200px;
    z-index:1;
    opacity:.9;
  }

  /* ---------- Facts band ---------- */
  .facts{
    background:var(--near-black);
    color:var(--cream);
    border-top:1px solid var(--line-light);
    border-bottom:1px solid var(--line-light);
  }
  .facts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
  .fact{
    padding:38px 28px;
    text-align:center;
    border-left:1px solid var(--line-light);
  }
  .fact:first-child{ border-left:none; }
  .fact .num{
    font-family:'Libre Caslon Display', serif;
    font-size:32px;
    color:var(--gold);
    display:block;
    margin-bottom:6px;
  }
  .fact .label{
    font-size:13px;
    letter-spacing:.04em;
    color:rgba(244,239,230,0.75);
  }

  /* ---------- Generic section ---------- */
  .section{ padding:112px 0; }
  .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .section-head h2{
    font-size:clamp(28px,3.4vw,40px);
    margin-top:18px;
  }
  .on-dark{ background:var(--wine-deep); color:var(--cream); }
  .section-compact{ padding:76px 0; }
  .section-compact .section-head{ margin-bottom:38px; }

  /* ---------- Services ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--cream);
    display:flex;
    flex-direction:column;
    transition:background .35s var(--ease);
  }
  .service-card:hover{ background:var(--paper); }

  /* La foto ilustra el resultado del trámite: la vida que empieza después. */
  .sc-foto{
    position:relative;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:var(--cream-2);
  }
  .sc-foto img{
    width:100%; height:100%;
    display:block;
    object-fit:cover;
    transition:transform .9s var(--ease);
  }
  .service-card:hover .sc-foto img{ transform:scale(1.045); }
  .sc-foto::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(44,20,27,0) 55%, rgba(44,20,27,.22) 100%);
  }
  /* Sin foto (o mientras no la haya): la tarjeta es como era, icono arriba. */
  .sc-cuerpo{
    position:relative;
    flex:1;
    padding:40px 34px;
  }
  .service-card .icon{
    width:30px; height:30px;
    color:var(--olive-deep);
    margin-bottom:22px;
  }
  /* Con foto: el icono pasa a medallón montado sobre el borde de la imagen. */
  .sc-foto + .sc-cuerpo{ padding:44px 34px 40px; }
  .sc-foto + .sc-cuerpo .icon{
    position:absolute;
    top:-27px; left:30px;
    width:54px; height:54px;
    padding:14px;
    box-sizing:border-box;
    border-radius:50%;
    background:var(--cream);
    box-shadow:0 8px 20px rgba(44,20,27,.18);
    margin:0;
    transition:background .35s var(--ease), color .35s var(--ease);
  }
  .service-card:hover .sc-foto + .sc-cuerpo .icon{ background:var(--paper); color:var(--wine); }
  .service-card h3{
    font-size:19px;
    margin-bottom:10px;
    color:var(--ink);
  }
  .service-card p{
    font-size:14.5px;
    color:var(--ink-soft);
  }

  /* ---------- Why us ---------- */
  .why{
    display:grid;
    grid-template-columns: .9fr 1.1fr;
    gap:70px;
    align-items:center;
  }
  .why-visual{
    border-radius:var(--radius);
    position:relative;
    background:var(--cream-2);
    border:1px solid var(--line);
    overflow:hidden;
    padding:34px 26px;
  }
  /* Globo de la marca como fondo del panel, teñido en oscuro sobre el crema */
  .why-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background-color:var(--olive-deep);
    -webkit-mask:url(/assets/img/mask_02.png) no-repeat 118% center / auto 118%;
    mask:url(/assets/img/mask_02.png) no-repeat 118% center / auto 118%;
    opacity:.16;
    pointer-events:none;
  }
  /* Montaje del equipo */
  .team-montage{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px 12px;
  }
  .team-member{
    width:calc(33.333% - 8px);
    margin:0;
    text-align:center;
  }
  .team-member img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:var(--radius);
    border:1px solid rgba(185,151,90,0.5);
    box-shadow:0 14px 30px -18px rgba(46,51,36,0.55);
  }
  .team-member span{
    display:block;
    margin-top:9px;
    font-size:9.5px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    line-height:1.3;
  }
  .why-list{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column;
  }
  .why-list li{
    display:flex; gap:20px;
    padding:26px 0;
    border-top:1px solid var(--line);
  }
  .why-list li:last-child{ border-bottom:1px solid var(--line); }
  .why-list .icon{ width:22px; height:22px; flex-shrink:0; color:var(--wine); margin-top:2px; }
  .why-list h3{ font-size:17px; margin-bottom:6px; font-family:'Work Sans'; font-weight:600; }
  .why-list p{ font-size:14.5px; color:var(--ink-soft); }

  /* ---------- Process ---------- */
  .process{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
  }
  .step{
    padding-left:22px;
    border-left:1px solid var(--line-light);
  }
  .step:first-child{ border-left:none; padding-left:0; }
  .step .step-num{
    font-family:'Libre Caslon Display', serif;
    font-size:15px;
    color:var(--gold);
    display:block;
    margin-bottom:26px;
  }
  .step h3{
    font-size:16.5px;
    color:var(--cream);
    margin-bottom:10px;
    font-family:'Work Sans'; font-weight:600;
  }
  .step p{ font-size:13.8px; color:rgba(244,239,230,0.72); }

  /* ---------- Testimonials ---------- */
  .testi-list, .testi-carrusel{
    max-width:720px;
    margin:0 auto;
  }
  .testi-item{
    display:grid;
    grid-template-columns:52px 1fr;
    column-gap:22px;
    padding:44px 0;
    margin:0;
    border-top:1px solid var(--line);
  }
  .testi-list .testi-item:first-child{ border-top:none; padding-top:0; }
  .testi-avatar{
    grid-row:1 / span 2;
    width:52px; height:52px; border-radius:50%;
    background:var(--wine); color:var(--cream);
    display:flex; align-items:center; justify-content:center;
    font-family:'Libre Caslon Display', serif; font-size:18px;
    flex-shrink:0;
  }
  .testi-body{ margin:0; }
  .testi-body .stars{ display:block; color:var(--gold-deep); font-size:13px; letter-spacing:2px; margin-bottom:12px; }
  .testi-body p.quote{
    font-family:'Libre Caslon Display', serif;
    font-style:italic;
    font-weight:400;
    font-size:18px;
    line-height:1.55;
    color:var(--ink);
    margin-bottom:14px;
  }
  .testi-item .who{ font-size:13.5px; color:var(--ink-soft); }
  .testi-item .who strong{ color:var(--ink); font-weight:600; }
  .testi-fuente{
    display:block;
    margin-top:4px;
    font-size:12px;
    color:var(--ink-soft);
    opacity:.7;
  }

  /* Carrusel de la portada: las reseñas se van turnando */
  .testi-pista{ display:grid; }
  .testi-carrusel .testi-item{
    grid-area:1 / 1;
    align-self:center;          /* las reseñas cortas quedan centradas en el hueco */
    border-top:none;
    padding:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .55s var(--ease), visibility .55s var(--ease);
  }
  .testi-carrusel .testi-item.is-active{ opacity:1; visibility:visible; }
  .testi-mandos{
    display:flex; align-items:center; justify-content:center;
    gap:22px; margin-top:40px;
  }
  .testi-flecha{
    width:38px; height:38px; border-radius:50%;
    background:none; border:1px solid var(--line);
    color:var(--ink-soft); font-size:15px; line-height:1;
    transition:border-color .3s var(--ease), color .3s var(--ease);
  }
  .testi-flecha:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
  .testi-puntos{ display:flex; align-items:center; gap:9px; }
  .testi-punto{
    width:7px; height:7px; padding:0; border:none; border-radius:50%;
    background:var(--line);
    transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .testi-punto:hover{ background:var(--gold-deep); }
  .testi-punto.is-active{ background:var(--gold-deep); transform:scale(1.35); }

  @media (max-width: 560px){
    .testi-item{ grid-template-columns:44px 1fr; column-gap:16px; }
    .testi-avatar{ width:44px; height:44px; font-size:16px; }
    .testi-body p.quote{ font-size:17px; }
  }

  /* ---------- About / Edéen ---------- */
  .about{
    display:grid;
    grid-template-columns: .8fr 1.2fr;
    gap:70px;
    align-items:center;
  }
  .about-mark{
    display:flex; align-items:center; justify-content:center;
  }
  .monogram{
    width:210px; height:210px;
    border-radius:50%;
    border:1px solid rgba(185,151,90,0.6);
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .monogram::before{
    content:"";
    position:absolute; inset:14px;
    border-radius:50%;
    border:1px solid rgba(185,151,90,0.32);
  }
  .monogram span{
    font-family:'Libre Caslon Display', serif;
    font-size:50px;
    color:var(--wine);
  }
  .about-copy p{ font-size:16px; color:var(--ink-soft); margin-bottom:18px; max-width:56ch; }
  .about-copy .credentials{
    display:flex; gap:34px; margin-top:30px; flex-wrap:wrap;
  }
  .about-copy .credentials div{ font-size:13px; color:var(--ink-soft); }
  .about-copy .credentials strong{
    display:block; font-family:'Libre Caslon Display', serif; font-size:15px; color:var(--ink); margin-bottom:4px;
  }

  /* ---------- Final CTA ---------- */
  .cta-band{
    background: linear-gradient(120deg, var(--wine-deep) 0%, var(--wine) 100%);
    color:var(--cream);
    padding:96px 0;
    text-align:center;
  }
  .cta-band h2{ font-size:clamp(28px,4vw,44px); max-width:16ch; margin:0 auto 18px; color:var(--white); }
  .cta-band p{ font-size:16px; opacity:.85; margin-bottom:38px; }
  .cta-band .hero-ctas{ justify-content:center; }
  .cta-band .btn-primary{ background:var(--gold); color:var(--near-black); }
  .cta-band .btn-primary:hover{ background:var(--cream); }
  .cta-band .eyebrow{ color:var(--gold); }
  .cta-band .eyebrow::before{ background:var(--gold); }

  /* ---------- Footer ---------- */
  footer{
    background:var(--near-black);
    color:rgba(244,239,230,0.75);
    padding:70px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:56px;
    border-bottom:1px solid var(--line-light);
  }
  .footer-brand{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
  .footer-brand .logo-lockup{ height:48px; }
  .footer-tag{ font-size:13.5px; max-width:32ch; opacity:.8; }
  .footer-col h4{
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
    margin-bottom:18px; font-weight:600;
  }
  .footer-col a, .footer-col p{ display:block; font-size:14px; margin-bottom:12px; opacity:.85; }
  .footer-col a:hover{ opacity:1; color:var(--cream); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:26px; font-size:12.5px; opacity:.6; flex-wrap:wrap; gap:10px;
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .btn, .service-card, .sc-foto img, .nav-links a::after{ transition:none; }
    .service-card:hover .sc-foto img{ transform:none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .hero-grid{ grid-template-columns:1fr; gap:44px; text-align:left; }
    .hero-topo{ --marca-agua:.03; --globo-x:56%; --globo-h:150%; }
    .hero::after{ background:linear-gradient(170deg, rgba(44,20,27,.55) 0%, rgba(44,20,27,.18) 45%, rgba(44,20,27,0) 75%); }
    .hero-medallion{ order:-1; gap:26px; }
    .marca-viva{ margin:0 auto; }
    .hero-saludo .s1{ font-size:24px; }
    .hero-saludo .s3-firma{ width:222px; }
    .facts-grid{ grid-template-columns:1fr; }
    .fact{ border-left:none; border-top:1px solid var(--line-light); }
    .fact:first-child{ border-top:none; }
    .services-grid{ grid-template-columns:1fr 1fr; }
    .why, .about{ grid-template-columns:1fr; }
    .why-visual{ max-width:460px; margin:0 auto; }
    .process{ grid-template-columns:1fr 1fr; row-gap:36px; }
    .step{ border-left:none; padding-left:0; }
    .testi-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  /* El menú se aprieta con las etiquetas largas de FR/EN: se aligera por etapas
     y pasa a menú hamburguesa antes que el resto del layout. */
  @media (max-width: 1250px){
    .nav-links{ gap:24px; }
    header .nav-social{ display:none; }
    .nav-cta{ gap:12px; }
  }
  @media (max-width: 1150px){
    .nav-links, .nav-cta .lang-switch, .nav-cta .btn{ display:none; }
    .burger{ display:block; }
  }
  @media (max-width: 720px){
    .services-grid{ grid-template-columns:1fr; }
    /* A una columna la foto ocupa todo el ancho: se recorta más baja. */
    .sc-foto{ aspect-ratio:2 / 1; }
    .sc-foto + .sc-cuerpo{ padding:42px 28px 34px; }
    .process{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
    .hero{ padding-top:130px; }
    .hero-grid{ padding-bottom:70px; }
  }

  /* Mobile nav panel */
  .mobile-nav{
    position:fixed; inset:0; z-index:99;
    background:var(--near-black);
    display:flex; flex-direction:column;
    justify-content:center;
    padding:40px 28px;
    transform:translateY(-100%);
    transition:transform .45s var(--ease);
  }
  .mobile-nav.open{ transform:translateY(0); }
  .mobile-nav a{
    color:var(--cream); font-family:'Libre Caslon Display', serif;
    font-size:30px; padding:14px 0; border-bottom:1px solid var(--line-light);
  }
  .mobile-nav .btn{ margin-top:30px; width:fit-content; }

  /* ---------- Social icons ---------- */
  .nav-social{ display:flex; align-items:center; gap:16px; }
  .nav-social a{ color:var(--cream); opacity:.75; display:flex; transition:opacity .3s var(--ease); }
  .nav-social a:hover{ opacity:1; }
  .nav-social svg{ width:17px; height:17px; }
  .mobile-nav .nav-social{ margin-top:26px; gap:22px; }
  .mobile-nav .nav-social svg{ width:22px; height:22px; }
  .footer-col a.social-link{ display:flex; align-items:center; gap:10px; }
  .footer-col a.social-link svg{ width:16px; height:16px; flex-shrink:0; }

  /* ---------- Énfasis dentro del texto ---------- */
  .prose strong, .nota strong, .pasos strong, .area p strong,
  .check-list strong, .faq p strong, .tabla strong{
    color:var(--ink); font-weight:600;
  }
  .pasos strong{ color:var(--cream); }
  .pasos-light strong{ color:var(--ink); }
  .lead strong{ color:inherit; font-weight:600; }

  /* ---------- Language switch ---------- */
  .lang-switch a{
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--cream); font-family:inherit; font-size:12.5px; font-weight:600;
    letter-spacing:.05em; opacity:.6; text-decoration:none;
    transition:opacity .3s var(--ease), color .3s var(--ease);
  }
  .lang-switch a:hover{ opacity:1; }
  .lang-switch a.is-active{ opacity:1; color:var(--gold); }
  .mobile-nav .lang-switch{
    margin-top:26px; gap:14px;
    flex-direction:row; align-items:center;
  }
  .mobile-nav .lang-switch a{
    font-size:17px; font-family:inherit;
    padding:0; border-bottom:none;
  }
  .mobile-nav .lang-switch span{ font-size:17px; }

  /* ---------- Retrato Edéen (Quiénes somos) ---------- */
  .about-portrait{
    position:relative;
    width:100%;
    max-width:280px;
    margin:0;
  }
  .about-portrait-frame{ position:relative; }
  .about-portrait-frame img,
  .about-portrait-frame video{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:389/667;   /* proporción exacta de la foto editada por Vincent */
    object-fit:cover;
    object-position:center;
    border-radius:var(--radius);
  }
  .portrait-badge{
    position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
    background:rgba(44,20,27,0.88); color:var(--cream);
    font-size:10.5px; font-weight:600; letter-spacing:.03em;
    padding:6px 14px; border-radius:20px;
    border:1px solid rgba(185,151,90,0.5);
    white-space:nowrap;
  }
  .about-portrait-frame::before{
    content:"";
    position:absolute; inset:0;
    transform:translate(-16px, 16px);
    border:1px solid rgba(185,151,90,0.6);
    border-radius:var(--radius);
  }
  .about-portrait figcaption{
    margin-top:20px;
    font-size:12.5px;
    letter-spacing:.03em;
    color:var(--ink-soft);
  }
  @media (max-width: 980px){
    .about-portrait{ margin:0 auto; }
  }


  /* ---------- Globo de marca como fondo de sección (idea del PDF) ---------- */
  .globe-bg{ position:relative; overflow:hidden; }
  .globe-bg > *{ position:relative; z-index:1; }
  .globe-bg::before{
    content:"";
    position:absolute; inset:0; z-index:0;
    background-color:var(--cream);
    -webkit-mask:url(/assets/img/mask_02.png) no-repeat 108% center / auto 150%;
    mask:url(/assets/img/mask_02.png) no-repeat 108% center / auto 150%;
    opacity:.11;
    pointer-events:none;
  }

  /* ---------- Otras áreas de práctica ---------- */
  .areas-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:64px;
  }
  .area{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:26px 0;
    border-top:1px solid var(--line-light);
  }
  .area .icon{ width:30px; height:30px; color:var(--gold); flex-shrink:0; margin-top:2px; }
  a.area{ transition:opacity .3s var(--ease); }
  a.area:hover{ opacity:.72; }
  a.area:hover h3{ color:var(--gold); }
  .areas-light a.area:hover h3{ color:var(--wine); }
  .area .mas{
    display:inline-block; margin-top:10px;
    font-size:13px; font-weight:600; color:var(--gold-deep);
  }
  .area h3{
    font-family:'Libre Caslon Display', serif;
    font-weight:400;
    font-size:19px;
    color:var(--cream);
    line-height:1.25;
    margin-bottom:7px;
  }
  .area p{
    font-size:14.5px;
    line-height:1.6;
    color:rgba(244,239,230,0.66);
    max-width:44ch;
  }

  /* ---------- Órbita de clientes (sección Servicios) ---------- */
  .serv-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:60px;
    align-items:center;
    margin-bottom:56px;
  }
  .serv-head .section-head{ margin-bottom:0; }
  .orbita-bloque{ margin:0; text-align:center; }
  .orbita-bloque figcaption{
    margin-top:18px;
    font-size:13px;
    color:var(--ink-soft);
    max-width:26ch;
    margin-inline:auto;
  }
  .orbita{
    --guia:242px;   /* círculo punteado exterior */
    --centro:164px; /* diámetro del retrato central */
    position:relative;
    width:540px; height:540px;
  }
  /* Tres anillos girando a distinta velocidad y en sentidos alternos. */
  .orbita-int{ --r:126px; --d:68px; --orb:62s;  --giro:normal;  --anti:reverse; }
  .orbita-med{ --r:184px; --d:56px; --orb:88s;  --giro:reverse; --anti:normal;  }
  .orbita-ext{ --r:242px; --d:48px; --orb:118s; --giro:normal;  --anti:reverse; }
  .orbita::before, .orbita::after{
    content:"";
    position:absolute; top:50%; left:50%;
    width:calc(var(--guia) * 2); height:calc(var(--guia) * 2);
    margin:calc(var(--guia) * -1);
    border-radius:50%;
    border:1px dashed rgba(185,151,90,0.4);
  }
  .orbita::after{
    --guia2:calc(var(--guia) * 0.5);
    width:calc(var(--guia2) * 2); height:calc(var(--guia2) * 2);
    margin:calc(var(--guia2) * -1);
    border-color:rgba(185,151,90,0.22);
  }
  .orbita-centro{
    position:absolute; top:50%; left:50%;
    width:var(--centro); height:var(--centro);
    margin:calc(var(--centro) / -2);
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(185,151,90,0.7);
    box-shadow:0 10px 30px rgba(44,20,27,0.14);
  }
  .orbita-giro{
    position:absolute; inset:0;
    animation:orbitar var(--orb) linear infinite;
    animation-direction:var(--giro);
  }
  .orbe{
    position:absolute; top:50%; left:50%;
    width:var(--d); height:var(--d); margin:calc(var(--d) / -2);
    transform:rotate(var(--a)) translateX(var(--r));
  }
  .orbe-fix{
    display:block; width:100%; height:100%;
    transform:rotate(calc(-1 * var(--a)));
  }
  .orbe img{
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
    background:var(--cream-2);
    border:1px solid rgba(185,151,90,0.5);
    box-shadow:0 6px 18px rgba(44,20,27,0.12);
    /* contrarresta el giro de su anillo: las caras nunca se ponen de cabeza */
    animation:orbitar var(--orb) linear infinite;
    animation-direction:var(--anti);
  }
  @keyframes orbitar{
    from{ transform:rotate(0deg); }
    to{   transform:rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .orbita-giro, .orbe img{ animation:none; }
  }
  @media (max-width: 1080px){
    .serv-head{ grid-template-columns:1fr; gap:40px; justify-items:center; text-align:center; }
    .serv-head .section-head{ text-align:center; }
    .serv-head .eyebrow{ justify-content:center; }
  }
  @media (max-width: 1080px){
    .orbita{ --guia:200px; --centro:126px; width:460px; height:460px; }
    .orbita-int{ --r:100px; --d:58px; }
    .orbita-med{ --r:150px; --d:47px; }
    .orbita-ext{ --r:200px; --d:40px; }
  }
  @media (max-width: 430px){
    /* en el teléfono la órbita tiene que caber en el ancho útil (unos 334 px),
       contando el radio más media foto; si no, la página se desplaza de lado */
    .orbita{ --guia:132px; --centro:92px; width:300px; height:300px; }
    .orbita-int{ --r:66px; --d:42px; }
    .orbita-med{ --r:100px; --d:34px; }
    .orbita-ext{ --r:132px; --d:30px; }
  }

  /* ---------- Prensa ---------- */
  .press-list{ display:flex; flex-direction:column; }
  .press-item{
    display:grid;
    grid-template-columns:136px 176px 1fr auto;
    gap:26px;
    align-items:center;
    padding:26px 0;
    border-top:1px solid var(--line);
    transition:background .35s var(--ease);
  }
  .press-thumb{
    width:136px;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
    object-position:50% 8%;   /* las tres fotos tienen a alguien de pie: manda la cabeza */
    display:block;
    border-radius:2px;
    background:var(--cream-2);
    transition:opacity .35s var(--ease);
  }
  .press-item:hover .press-thumb{ opacity:.86; }
  .press-item:last-child{ border-bottom:1px solid var(--line); }
  .press-meta{
    font-size:12px;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--gold-deep);
  }
  .press-item h3{ font-size:clamp(17px,2vw,21px); color:var(--ink); }
  .press-link{
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--wine);
    white-space:nowrap;
    border-bottom:1px solid rgba(110,53,66,0.35);
    padding-bottom:2px;
    transition:color .3s var(--ease), border-color .3s var(--ease);
  }
  .press-item:hover h3{ color:var(--wine); }
  .press-link:hover{ color:var(--gold-deep); border-color:var(--gold-deep); }

  @media (max-width: 860px){
    .areas-grid{ grid-template-columns:1fr; column-gap:0; }
    .press-item{ grid-template-columns:1fr; gap:14px; padding:24px 0; }
    /* a lo ancho, 16:9 recortaba tanto que cortaba las cabezas */
    .press-thumb{ width:100%; aspect-ratio:5 / 4; }
  }

  /* ---------- Aviso de privacidad (panel legal) ---------- */
  .legal-overlay{
    position:fixed; inset:0; z-index:200;
    background:rgba(44,20,27,0.55);
    backdrop-filter:blur(3px);
    display:none;
    padding:40px 20px;
    overflow-y:auto;
  }
  .legal-overlay.open{ display:block; }
  body.legal-open{ overflow:hidden; }
  .legal-panel{
    background:var(--paper);
    max-width:760px;
    margin:0 auto;
    border-radius:var(--radius);
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.5);
    position:relative;
  }
  .legal-head{
    position:sticky; top:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:28px 40px 20px;
    display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
    border-radius:var(--radius) var(--radius) 0 0;
  }
  .legal-head h2{ font-size:clamp(21px,2.6vw,28px); max-width:22ch; }
  .legal-close{
    background:none; border:1px solid var(--line);
    width:38px; height:38px; border-radius:50%;
    color:var(--ink); font-size:18px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  .legal-close:hover{ background:var(--cream-2); border-color:var(--ink); }
  .legal-body{ padding:30px 40px 44px; }
  .legal-body p{ font-size:14.8px; color:var(--ink-soft); margin-bottom:18px; }
  .legal-body h3{
    font-family:'Work Sans', sans-serif; font-weight:600;
    font-size:14px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--wine); margin:34px 0 14px;
  }
  .legal-body h3:first-child{ margin-top:0; }
  .legal-body ul{ margin:0 0 18px; padding-left:20px; }
  .legal-body li{ font-size:14.8px; color:var(--ink-soft); margin-bottom:8px; }
  .legal-body a{ color:var(--wine); text-decoration:underline; text-underline-offset:3px; }
  .legal-meta{
    margin-top:32px; padding-top:20px;
    border-top:1px solid var(--line);
    font-size:13px; color:var(--ink-soft);
  }
  @media (max-width: 620px){
    .legal-overlay{ padding:0; }
    .legal-head{ padding:22px 22px 16px; }
    .legal-body{ padding:24px 22px 40px; }
  }
  /* ================= Sitio multipágina ================= */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:300;
    background:var(--wine); color:var(--cream); padding:12px 20px; font-size:14px;
  }
  .skip-link:focus{ left:0; }

  .breadcrumb{ background:var(--cream-2); padding:14px 0; font-size:13px; color:var(--ink-soft); margin-top:78px; }
  .breadcrumb a{ color:var(--wine); }
  .breadcrumb a:hover{ text-decoration:underline; }
  .breadcrumb span{ opacity:.6; }

  .page-hero{ padding:64px 0 46px; background:var(--cream-2); }
  .page-hero h1{ font-size:clamp(30px,4.4vw,48px); margin:18px 0 22px; max-width:20ch; }
  .page-hero .lead{ font-size:17.5px; color:var(--ink-soft); max-width:60ch; }
  .page-hero .hero-ctas{ margin-top:32px; }

  /* ---------- Cinta de clientes bajo los botones del trámite ----------
     Fotos reales de clientes con su residencia. Una sola fila que entra por la
     izquierda y camina hacia la derecha, de borde a borde, sin desvanecidos. */
  .page-hero-tira{ padding:56px 0 0; overflow:hidden; }

  .tira-clientes{
    --alto:150px;
    --hueco:12px;
    margin-top:46px;
    padding-bottom:52px;
    overflow:hidden;
  }
  .tira-pista{
    /* la lista va dos veces y se corre justo la mitad: el salto no se ve.
       max-content para que el ancho sea el de las fotos, no el del contenedor. */
    display:flex;
    width:max-content;
    will-change:transform;
    animation:tira-der 78s linear infinite;
  }
  .tira-pista img{
    height:var(--alto); width:auto;   /* si no, gana el atributo width del HTML */
    aspect-ratio:4 / 5;
    object-fit:cover;
    display:block;
    flex:0 0 auto;
    margin-right:var(--hueco);        /* margen, no gap: el bucle tiene que cuadrar */
    border-radius:var(--radius);
    background:var(--cream-2);
    box-shadow:0 4px 14px rgba(44,20,27,.10);
  }
  @keyframes tira-der{
    from{ transform:translateX(-50%); }
    to{   transform:translateX(0); }
  }

  @media (max-width: 900px){
    .tira-clientes{ --alto:118px; --hueco:9px; margin-top:36px; padding-bottom:40px; }
  }

  @media (prefers-reduced-motion: reduce){
    .tira-pista{ animation:none; }
  }

  /* Banda de foto bajo la cabecera del trámite: la vida que empieza después. */
  .tramite-foto{
    margin:0 auto;
    max-width:1600px;          /* la foto se ve entera: nunca corta una cara */
    background:var(--cream-2);
  }
  .tramite-foto img{
    width:100%; height:auto;
    max-width:none;
    display:block;
    aspect-ratio:21 / 9;
    object-fit:cover;
  }
  @media (max-width: 720px){
    .tramite-foto img{ aspect-ratio:16 / 10; }
  }

  .prose{ max-width:760px; }
  .prose h2{ font-size:clamp(24px,3vw,34px); margin-bottom:22px; }
  .prose-intro{ font-size:16px; color:var(--ink-soft); margin-bottom:22px; }
  .on-dark .prose-intro{ color:var(--cream); }   /* sobre el vino, en blanco */
  .nota{
    font-size:14.5px; color:var(--ink-soft); background:var(--paper);
    border-left:2px solid var(--gold); padding:16px 20px; margin-top:26px;
  }

  .check-list{ list-style:none; margin:0; padding:0; }
  .check-list li{
    position:relative; padding:12px 0 12px 28px; font-size:15.5px; color:var(--ink-soft);
    border-top:1px solid var(--line);
  }
  .check-list li::before{
    content:""; position:absolute; left:4px; top:19px;
    width:7px; height:7px; border-radius:50%; background:var(--gold);
  }

  .pasos{ list-style:none; counter-reset:p; margin:0; padding:0; }
  .pasos li{
    counter-increment:p; position:relative; padding:24px 0 24px 56px;
    border-top:1px solid var(--line-light);
  }
  .pasos li::before{
    content:"0" counter(p); position:absolute; left:0; top:26px;
    font-family:'Libre Caslon Display', serif; font-size:15px; color:var(--gold);
  }
  .pasos h3{ font-family:'Work Sans'; font-weight:600; font-size:17px; color:var(--cream); margin-bottom:6px; }
  .pasos p{ font-size:15px; color:rgba(244,239,230,0.75); max-width:62ch; }
  .pasos-light li{ border-top-color:var(--line); }
  .pasos-light h3{ color:var(--ink); }
  .pasos-light p{ color:var(--ink-soft); }

  .faq{ border-top:1px solid var(--line); padding:4px 0; }
  .faq summary{
    cursor:pointer; padding:18px 30px 18px 0; font-size:16.5px; font-weight:600;
    color:var(--ink); position:relative; list-style:none;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{
    content:"+"; position:absolute; right:4px; top:16px;
    font-size:20px; color:var(--gold-deep); font-weight:400;
  }
  .faq[open] summary::after{ content:"–"; }
  .faq p{ padding:0 0 20px; font-size:15.5px; color:var(--ink-soft); max-width:64ch; }

  .areas-light .area{ border-top-color:var(--line); }
  .areas-light .area h3{ color:var(--ink); margin-bottom:6px; }
  .areas-light .area p{ font-size:15px; color:var(--ink-soft); }

  .rel-title{ font-size:20px; margin-bottom:24px; }
  .rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .rel-card{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 22px; background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); font-size:15px; color:var(--ink);
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  .rel-card::after{ content:"→"; color:var(--gold-deep); }
  .rel-card:hover{ background:var(--cream-2); border-color:var(--gold); }

  a.service-card{ display:block; }
  a.service-card .mas{
    display:block; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--wine);
  }
  a.service-card:hover .mas{ color:var(--gold-deep); }

  .contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
  .datos{ list-style:none; margin:24px 0 0; padding:0; }
  .datos li{
    display:grid; grid-template-columns:110px 1fr; gap:16px;
    padding:16px 0; border-top:1px solid var(--line); font-size:15.5px; color:var(--ink-soft);
  }
  .datos span{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); padding-top:3px; }
  .datos a{ color:var(--wine); }
  .datos a:hover{ text-decoration:underline; }

  @media (max-width: 860px){
    .rel-grid{ grid-template-columns:1fr; }
    .contacto-grid{ grid-template-columns:1fr; gap:44px; }
  }

  /* Páginas interiores: la cabecera va sólida desde el inicio, porque
     debajo hay fondo claro y el texto crema no se leería. */
  body.inner header{
    background:rgba(44,20,27,0.96);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(244,239,230,0.1);
  }
  body.inner .page-hero{ padding-top:112px; }
  body.inner .breadcrumb + .page-hero{ padding-top:64px; }

  /* Bloques de profundidad de las páginas de trámite */
  .prose p{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin-bottom:18px; }
  .prose p:last-child{ margin-bottom:0; }
  .punto{ padding:22px 0; border-top:1px solid var(--line); }
  .punto:first-of-type{ border-top:none; padding-top:8px; }
  .punto h3{
    font-family:'Work Sans', sans-serif; font-weight:600; font-size:16.5px;
    color:var(--ink); margin-bottom:7px;
  }
  .punto p{ margin-bottom:0; }
  .tabla-scroll{ overflow-x:auto; margin:26px 0 22px; }
  .tabla{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px; }
  .tabla th{
    text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.09em;
    text-transform:uppercase; color:var(--gold-deep);
    padding:0 18px 12px 0; border-bottom:1px solid var(--line);
  }
  .tabla td{
    padding:15px 18px 15px 0; border-bottom:1px solid var(--line);
    color:var(--ink-soft); vertical-align:top;
  }
  .tabla tbody tr td:first-child{ color:var(--ink); font-weight:500; }


  




/* El hero es una columna flex con align-items:center, así que un hijo suelto
   se ensancha hasta su contenido — y el contenido de la cinta mide 18.000 px.
   Sin `align-self:stretch` la banda se iba a 1120 px en un teléfono de 390 y
   el 4,9 quedaba centrado fuera de la pantalla. El `min-width:0` de la pista
   es la otra mitad: impide que la cinta imponga su ancho hacia arriba. */
.voces{ align-self:stretch; width:100%; max-width:1120px;
  margin:28px auto 0; padding:15px 0;
  border-top:1px solid rgba(185,151,91,0.32);
  border-bottom:1px solid rgba(185,151,91,0.32); }
.voces-riel{ display:flex; align-items:center; justify-content:center;
  gap:14px; margin-bottom:12px; }
.voces-filete{ flex:1; height:1px; max-width:160px;
  background:rgba(185,151,91,0.2); }
.voces-nota{ display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:inherit; white-space:nowrap; }
.voces-nota .stars{ color:var(--gold); font-size:12px; letter-spacing:.14em; }
.voces-num{ font-size:14px; font-weight:600; color:var(--cream); }
.voces-ops{ font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(244,239,230,0.5); }
.voces-nota:hover .voces-ops{ color:rgba(244,239,230,0.8); }

/* La pista recorta la cinta y la desvanece por los dos lados, para que las
   frases no aparezcan y desaparezcan de golpe contra el borde. */
.voces-pista{ overflow:hidden; position:relative; min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,
    #000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 56px,
    #000 calc(100% - 56px),transparent); }
.voces-tira{ display:flex; align-items:baseline; width:max-content;
  white-space:nowrap; animation:voces-desfile 160s linear infinite; }
.voces-pista:hover .voces-tira,
.voces-pista:focus-within .voces-tira{ animation-play-state:paused; }
@keyframes voces-desfile{ from{ transform:translateX(0); }
                          to{ transform:translateX(-50%); } }

.voz{ display:inline-flex; align-items:baseline; gap:13px; margin:0;
  padding-right:30px; }
.voces-rombo{ color:rgba(185,151,91,0.5); font-size:9px; padding-right:30px;
  align-self:center; }
.voz-cita{ margin:0; font-family:'Libre Caslon Display',Georgia,serif;
  font-size:19px; line-height:1.4; color:var(--cream); }
.voz-pie{ font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(244,239,230,0.5); }
/* El nombre va exactamente igual que el país: mismo gris, mismo grosor. Pasó
   por oro y por blanco en negrita, y las dos veces el ojo saltaba al nombre
   antes que a la cita. Lo que convence es la frase; la firma sólo tiene que
   estar. El <b> se queda por semántica, sin estilo. (Vincent, 10/10) */
.voz-pie b{ color:inherit; font-weight:inherit; }

/* Los botones estaban pegados al filete de abajo de la banda. En la portada
   original el hueco lo daba el párrafo que había encima; al quitarlo,
   `.hero-ctas` se quedó sin margen propio. */
.hero-centro .hero-ctas{ margin-top:30px; }

/* La portada perdió el párrafo y dos líneas del bloque de avales, así que la
   columna es más corta y quedaba un vacío largo entre Forbes y la firma de
   abajo. Se acerca la firma; el aire que protege su rasgo largo contra la
   cenefa está debajo de ella y no se toca. */
.hero-centro .hero-uno{ padding-bottom:clamp(24px, 2.6vw, 40px); }
.hero-centro .hero-saludo{ margin-top:clamp(14px, 1.6vw, 22px); padding-top:22px; }

/* El sello de Forbes siempre llevó a /prensa/, pero sin decirlo. La llamada
   va después del logotipo, en oro y pequeña, y la flecha se adelanta al pasar
   por encima. (Vincent, 10/10) */
.forbes-ver{ display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
  transition:color .25s var(--ease); }
.forbes-ver span{ font-size:15px; line-height:1; transform:translateY(-1px);
  transition:transform .25s var(--ease); }
.hero-forbes:hover .forbes-ver{ color:var(--cream); }
.hero-forbes:hover .forbes-ver span{ transform:translate(3px,-1px); }

/* La firma del final de la portada. Quedaba pegada a la cenefa y con todo el
   aire arriba; ahora va centrada entre Forbes y la onda, y el rasgo de Edéen
   es más pequeño para que no pese más que el lema. (Vincent, 10/10) */
.hero-centro .hero-saludo{ margin-top:0; padding-top:10px;
  padding-bottom:clamp(26px, 2.8vw, 40px); gap:10px; }
.hero-saludo .s3-firma{ width:clamp(150px, 14vw, 196px); height:auto; }

/* El logotipo, un 30% más pequeño: ocupaba casi media pantalla en el teléfono
   y empujaba todo lo demás hacia abajo. El breakpoint es el mismo 900px que
   usa la hoja original, para pisar su regla y no dejar un hueco entre los dos.
   (Vincent, 10/10) */
.marca-viva-hero{ width:min(504px, 59vw); }
@media (max-width:900px){ .marca-viva-hero{ width:min(364px, 70%); } }

/* La firma de Edéen.

   En escritorio va apilada —retrato arriba, nombre debajo— para que caiga en
   el mismo eje que el titular y que la banda. Con la foto al lado, el texto
   quedaba empujado a la derecha y la portada perdía el centro.

   En el teléfono no hay sitio: apilarla cuesta 62 px. Allí vuelve al par foto
   + ficha, pero con el texto alineado a la izquierda, para que la asimetría se
   lea como intención y no como un centrado fallido. (Vincent, 10/10) */
.hero-centro .hero-person{ flex-direction:column; gap:11px; }
.hero-person-text{ text-align:center; }

/* El claim bajo el nombre de Edéen: en Caslon, que es la voz de la marca, no
   la de la interfaz. */
.hero-person-text .wa{ font-family:'Libre Caslon Display',Georgia,serif;
  font-size:15px; letter-spacing:0; text-transform:none;
  color:rgba(244,239,230,0.78); margin-top:4px; }

/* El párrafo que bajó de la portada a la franja de cifras. */
.facts-intro{ max-width:58ch; margin:0 auto; padding:34px 24px 2px;
  text-align:center; font-size:17px; line-height:1.68;
  color:rgba(244,239,230,0.78); }

@media (max-width:760px){
  .hero-centro .hero-person{ flex-direction:row; gap:14px; }
  .hero-person-text{ text-align:left; }

  /* En el teléfono la portada tenía 130px de aire por arriba y los bloques
     muy separados: la primera voz caía justo por debajo del doblez. */
  .hero.hero-centro{ padding-top:72px; }
  .hero-centro h1{ margin-top:16px; }
  .hero-centro .hero-person{ margin-top:18px; }
  .facts-intro{ font-size:15px; padding:26px 20px 0; }
  .hero-centro .hero-ctas{ margin-top:24px; }
  /* en el teléfono la llamada de Forbes salta de línea: centrada, no a la
     izquierda, que es lo único que desentonaba en una portada centrada */
  .hero-centro .hero-forbes{ justify-content:center; }
  .hero-centro .hero-saludo{ padding-top:4px; }
  .voces{ margin-top:16px; padding:13px 0; }
  .voces-riel{ gap:10px; margin-bottom:10px; }
  .voces-filete{ max-width:26px; }
  .voces-ops{ font-size:10px; }
  .voces-pista{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,
      #000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28px,
      #000 calc(100% - 28px),transparent); }
  .voz-cita{ font-size:16.5px; }
  .voz{ gap:11px; padding-right:24px; }
  .voces-rombo{ padding-right:24px; }
}

/* A quien haya pedido menos movimiento no se le mueve nada: la cinta se queda
   quieta y se puede recorrer a mano. */
@media (prefers-reduced-motion:reduce){
  .voces-tira{ animation:none; }
  .voces-pista{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}

.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  max-width:980px;margin:0 auto;padding:16px 20px;border-radius:14px;
  background:#2B1118;color:#E8E0D5;box-shadow:0 10px 40px rgba(0,0,0,.35);
  font-size:.86rem;line-height:1.5}
.cookies p{margin:0;max-width:62ch}
.cookies a{color:#D9B978}
.cookies-botones{display:flex;gap:10px;flex-shrink:0}
.cookies button{font:inherit;cursor:pointer;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(232,224,213,.4);background:transparent;color:inherit}
.cookies button.si{background:#D9B978;border-color:#D9B978;color:#2B1118;font-weight:600}
@media (max-width:640px){.cookies{flex-direction:column;align-items:flex-start}}

/* --- guías ------------------------------------------------------------- */
.wrap-texto{max-width:880px}
.guia-portada{max-width:320px;margin:4px auto 44px;float:right;margin-left:44px}
.guia-portada img{display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid var(--sage)}
.guia-portada figcaption{margin:10px 0 0;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center}
@media (max-width:720px){.guia-portada{float:none;margin:0 auto 32px;max-width:300px}}
.guia h2{margin:48px 0 14px;font-size:1.5rem;line-height:1.25}
.guia h3{margin:32px 0 10px;font-size:1.15rem}
.guia p{margin:0 0 18px;line-height:1.75}
.guia ul{margin:0 0 22px;padding-left:1.1em}
.guia li{margin:0 0 10px;line-height:1.7}
.guia blockquote{margin:28px 0;padding:18px 22px;border-left:2px solid var(--gold);
  background:var(--paper)}
.guia blockquote p{margin:0}
.guia-faq{margin:0 0 8px}
.guia-faq dt{margin:26px 0 8px;font-weight:600}
.guia-faq dd{margin:0;line-height:1.75;color:var(--ink-soft)}
.guia-firma{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--sage);
  font-size:.92rem;color:var(--ink-soft)}
.guia-cta{margin:28px 0 0}
.guia-volver{margin:40px 0 0;font-size:.95rem}
.guia-cierre{margin:38px 0 6px;font-family:'Libre Caslon Display',serif;
  font-size:1.2rem;color:var(--wine)}
.guia-legal{margin:14px 0 0;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}

/* La tarjeta del final. `clear:both` porque la hoja de Instagram flota a la
   derecha y la tarjeta tiene que empezar por debajo de ella. */
.contacto{clear:both;display:flex;align-items:center;gap:24px;margin:44px 0 0;
  padding:26px 28px;border:1px solid var(--sage);border-radius:4px;
  background:var(--paper)}
.contacto-foto{width:96px;height:96px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;border:2px solid var(--white)}
.contacto-txt{min-width:0}
.contacto-frase{margin:0 0 10px;font-family:'Libre Caslon Display',serif;
  font-size:1.25rem;line-height:1.3;color:var(--wine)}
.contacto-quien{margin:0 0 18px;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.contacto-quien strong{display:block;font-size:1.02rem;color:var(--ink)}
.contacto-btn{display:inline-flex;align-items:center;gap:9px}
.contacto-btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
@media (max-width:560px){
  .contacto{flex-direction:column;text-align:center;gap:18px;padding:24px 20px}
  .contacto-btn{justify-content:center}
}

/* El botón que acompaña la lectura. Nace invisible y sin capturar el ratón:
   sólo existe de verdad cuando el guion le pone la clase `visible`. */
.flota{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;
  align-items:center;gap:11px;padding:7px 20px 7px 7px;border-radius:999px;
  background:var(--wine);color:var(--white);text-decoration:none;
  font-size:.95rem;font-weight:500;line-height:1;
  /* El aro claro no es adorno: en la portada el fondo también es vino y sin él
     el botón se funde con la página. Probado en la portada ES y EN. */
  box-shadow:0 8px 28px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.22);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease}
.flota[hidden]{display:none}
.flota.visible{opacity:1;transform:none;pointer-events:auto}
.flota:hover{background:var(--wine-deep)}
.flota img{width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.7)}
.flota svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.flota{transition:none}}
@media (max-width:640px){
  .flota{right:12px;bottom:12px;padding:6px 16px 6px 6px;font-size:.9rem;gap:9px}
  .flota img{width:36px;height:36px}
}
/* En pantallas muy estrechas la cara y el icono bastan: el rótulo se cae antes
   que el botón se coma el ancho de la lectura. */
@media (max-width:360px){.flota-txt{display:none}}
/* Al final del todo el botón se posaba encima de la última línea del pie. Se le
   hace sitio, y sólo en las páginas que llevan botón. En un navegador que no
   entienda `:has()` no pasa nada: se queda como estaba. */
body:has(.flota) .pie{padding-bottom:76px}

.guia-grupo{margin:0 0 56px}
.guia-grupo h2{margin:0 0 20px;font-size:1.35rem}
.guia-lista{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.guia-tarjeta a{display:block;text-decoration:none;color:inherit;height:100%;
  border:1px solid var(--sage);border-radius:4px;overflow:hidden;background:var(--white)}
.guia-tarjeta img{display:block;width:100%;height:auto}
.guia-tarjeta-txt{display:block;padding:18px 20px 22px}
.guia-tarjeta-txt strong{display:block;margin:0 0 8px;font-size:1.05rem;line-height:1.3}
.guia-tarjeta-txt em{display:block;font-style:normal;font-size:.92rem;line-height:1.6;
  color:var(--ink-soft)}
@media (max-width:640px){.guia h2{font-size:1.3rem}}

/* --- credenciales de Edéen (página Nosotros) ----------------------------- */
.about-copy .formacion{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  max-width:56ch}
.about-copy .formacion h3{margin:0 0 16px;font-family:'Work Sans',sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep)}
.about-copy .formacion dl{margin:0}
.about-copy .formacion dl div{margin:0 0 14px}
.about-copy .formacion dt{font-family:'Libre Caslon Display',serif;font-size:15px;
  color:var(--ink);margin:0 0 3px}
.about-copy .formacion dd{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.about-copy .formacion a{color:inherit;text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px}

/* ---------- Historia en video (Alexandra y Yannick) ---------- */
.historia-grid{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:56px; align-items:start; }
.historia-video{ position:relative; border-radius:18px; overflow:hidden; background:var(--near-black);
  aspect-ratio:9/16; box-shadow:0 24px 60px -28px rgba(44,20,27,.55); }
.historia-video video{ display:block; width:100%; height:100%; object-fit:cover; }
.historia-play{ position:absolute; inset:0; width:100%; border:0; padding:0; cursor:pointer;
  background:linear-gradient(180deg,rgba(44,20,27,0) 55%,rgba(44,20,27,.45)); display:flex;
  align-items:center; justify-content:center; transition:background .3s var(--ease); }
.historia-play span{ width:78px; height:78px; border-radius:50%; background:rgba(244,239,230,.92);
  box-shadow:0 10px 30px rgba(44,20,27,.35); position:relative; transition:transform .3s var(--ease); }
.historia-play span::after{ content:""; position:absolute; left:31px; top:24px; border-style:solid;
  border-width:15px 0 15px 24px; border-color:transparent transparent transparent var(--wine); }
.historia-play:hover span{ transform:scale(1.07); }
.historia-video.suena .historia-play{ display:none; }
.historia-texto h2{ margin:12px 0 18px; font-family:'Libre Caslon Display',Georgia,serif; font-weight:400;
  font-size:clamp(32px,3.6vw,46px); line-height:1.12; }
.historia-lead{ font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:58ch; }
.historia-cita{ margin:28px 0 10px; padding:0 0 0 22px; border-left:2px solid var(--gold); }
.historia-cita p{ font-family:'Libre Caslon Display',Georgia,serif; font-size:clamp(28px,3.2vw,40px);
  line-height:1.18; margin:0; color:var(--wine); }
.historia-trad{ display:block; margin-top:8px; font-size:15px; color:var(--ink-soft); font-style:italic; }
.historia-pie{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin:14px 0 26px; }
.historia-fotos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 28px; }
.historia-fotos img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:12px; display:block; }
.historia-fotos img:first-child{ grid-column:1/-1; aspect-ratio:3/2; }
.historia-trans{ border-top:1px solid var(--line); padding-top:16px; }
.historia-trans summary{ cursor:pointer; font-weight:600; color:var(--wine); list-style:none; }
.historia-trans summary::-webkit-details-marker{ display:none; }
.historia-trans summary::after{ content:" +"; color:var(--gold); }
.historia-trans[open] summary::after{ content:" –"; }
.historia-nota{ font-size:13.5px; color:var(--ink-soft); font-style:italic; margin:14px 0 4px; }
.historia-par{ margin:16px 0; }
.historia-par p{ margin:4px 0; line-height:1.65; }
.historia-fr{ color:var(--ink); }
.historia-par .historia-fr + p{ color:var(--ink-soft); }
.historia-portada{ background:var(--wine-deep); }
.historia-portada .historia-cita{ border-left-color:var(--gold); }
.historia-portada .historia-cita p{ color:var(--cream); }
.historia-portada .historia-trad{ color:rgba(244,239,230,.75); }
.historia-portada .historia-pie{ color:var(--gold); }
.historia-btn{ color:var(--cream); border:1px solid rgba(244,239,230,.55); background:transparent; }
.historia-btn:hover{ background:var(--cream); color:var(--wine-deep); border-color:var(--cream); }
.historia-portada .historia-grid{ align-items:center; grid-template-columns:minmax(0,320px) minmax(0,1fr); }
.historia-acceso{ display:inline-flex; align-items:center; gap:14px; margin:18px auto 4px; padding:7px 20px 7px 7px;
  border:1px solid rgba(244,239,230,.35); border-radius:999px; color:var(--cream); text-decoration:none;
  font-size:14px; letter-spacing:.02em; background:rgba(44,20,27,.35); transition:background .3s var(--ease), border-color .3s var(--ease); }
.historia-acceso:hover{ background:rgba(244,239,230,.12); border-color:var(--gold); }
.historia-acceso-foto{ position:relative; width:66px; height:44px; border-radius:999px; overflow:hidden; flex:none; }
.historia-acceso-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.historia-acceso-play{ position:absolute; inset:0; background:rgba(44,20,27,.35); }
.historia-acceso-play::after{ content:""; position:absolute; left:27px; top:14px; border-style:solid;
  border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--cream); }
@media (min-width:861px){ .historia:not(.historia-portada) .historia-video{ position:sticky; top:110px; } }
@media (max-width:860px){
  .historia-grid,.historia-portada .historia-grid{ grid-template-columns:1fr; gap:34px; }
  .historia-video{ max-width:340px; width:100%; margin:0 auto; }
}