@font-face{
    font-family:'Cormorant Garamond';
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url(fonts/cormorant-garamond.woff2) format('woff2');
  }
  @font-face{
    font-family:'Cormorant Garamond';
    font-style:italic;
    font-weight:400 600;
    font-display:swap;
    src:url(fonts/cormorant-garamond-italic.woff2) format('woff2');
  }
  @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:200 800;
    font-display:swap;
    src:url(fonts/montserrat.woff2) format('woff2');
  }

  :root{
    --cream-50:#FAF8F6;
    --cream-100:#F4EDE3;
    --cream-200:#EAE2D8;
    --gold-300:#C9A87F;
    --gold-500:#B49474;
    --gold-700:#8E735B;
    --ink-900:#2D2620;
    --ink-700:#4A3F35;
    --ink-500:#8A7A6C;
    --brown-900:#3A2418;
    --line:#DFD3C1;
    --white:#FFFFFF;
    --error:#B3452C;
    --shadow-soft:0 20px 50px -25px rgba(45,38,32,0.35);
    --ease:cubic-bezier(.22,1,.36,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    background:var(--cream-50);
    color:var(--ink-900);
    font-family:'Montserrat',sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* "clip" recorta igual que "hidden" pero sin convertir el body en un
     contenedor con scroll propio, que es lo que rompe el header sticky en
     Safari. Los navegadores viejos se quedan con la línea hidden de arriba. */
  @supports (overflow-x:clip){
    body{ overflow-x:clip; }
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,64px);
  }
  .eyebrow{
    font-family:'Montserrat',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold-700);
    margin:0 0 14px;
  }
  h1,h2,h3{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    line-height:1.08;
    margin:0;
    text-wrap:balance;
    color:var(--ink-900);
  }
  h2{ font-size:clamp(2.1rem,3.6vw,3.1rem); }
  p{ line-height:1.75; color:var(--ink-700); margin:0; }
  .btn-gold{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
    color:var(--white);
    padding:16px 42px;
    text-decoration:none;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    border:none;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 26px 46px -20px rgba(142,115,91,0.55); }
  .btn-gold:focus-visible{ outline:2px solid var(--ink-900); outline-offset:3px; }

  .btn-line{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:none;
    border:1px solid var(--ink-900);
    color:var(--ink-900);
    padding:14px 30px;
    text-decoration:none;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .35s var(--ease), color .35s var(--ease);
  }
  .btn-line:hover{ background:var(--ink-900); color:var(--white); }
  .btn-line:focus-visible{ outline:2px solid var(--gold-700); outline-offset:3px; }

  .icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

  /* ---------- header ---------- */
  header{
    position:-webkit-sticky; position:sticky; top:0; z-index:60;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 30px -22px rgba(45,38,32,0.35);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px clamp(20px,5vw,64px);
    gap:24px;
  }
  .brand{ display:flex; align-items:center; text-decoration:none; }
  .brand-logo{ height:34px; width:auto; display:block; }

  nav.primary-nav{ display:flex; align-items:center; gap:36px; }
  .nav-close{ display:none; }
  .nav-overlay{ display:none; }
  nav.primary-nav a{
    text-decoration:none; color:var(--ink-700); font-size:12px; font-weight:600;
    letter-spacing:0.1em; text-transform:uppercase; position:relative; padding:4px 0;
  }
  nav.primary-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:var(--gold-700); transform:scaleX(0); transform-origin:right;
    transition:transform .35s var(--ease);
  }
  nav.primary-nav a:hover::after, nav.primary-nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

  .nav-actions{ display:flex; align-items:center; gap:14px; }
  .icon-btn{
    background:none; border:none; color:var(--ink-900); cursor:pointer;
    padding:8px; display:flex; align-items:center; justify-content:center;
    transition:color .25s;
  }
  .icon-btn:hover{ color:var(--gold-700); }
  .icon-btn:focus-visible{ outline:2px solid var(--gold-700); outline-offset:2px; border-radius:2px; }
  .menu-toggle{ display:none; }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:clamp(520px,72vh,640px);
    /* dvh sigue la barra de URL del navegador móvil; los que no lo soporten
       se quedan con la línea vh de arriba. */
    min-height:clamp(520px,72dvh,640px);
    max-height:820px;
    display:flex; align-items:center;
    background:var(--cream-100);
    overflow:hidden;
  }
  /* top/right/bottom/left en vez de "inset": inset no existe en Safari 14.0 y
     anteriores, y sin él estas capas quedan con tamaño cero (hero en blanco). */
  .hero-bg{
    position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
    object-fit:cover; object-position:center; opacity:0.9;
  }
  .hero-veil{
    position:absolute; top:0; right:0; bottom:0; left:0;
    background:linear-gradient(100deg, rgba(250,248,246,0.94) 0%, rgba(250,248,246,0.62) 48%, rgba(250,248,246,0.05) 74%);
  }
  .hero-figure{
    position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
    display:flex; align-items:flex-end; justify-content:flex-end;
    pointer-events:none;
  }
  .hero-figure img{
    height:100%; width:auto; max-width:55%;
    object-fit:contain; object-position:bottom right;
    filter:drop-shadow(0 40px 50px rgba(45,38,32,0.22));
  }
  .hero-grid{
    position:relative; z-index:2;
    width:100%; max-width:1280px; margin:0 auto;
    padding:0 clamp(20px,5vw,64px);
  }
  .hero-copy{ max-width:640px; padding:48px 0; }
  .hero-copy h1{ font-size:clamp(2.4rem,3.9vw,3.6rem); margin-bottom:22px; }
  .hero-copy h1 em{ font-style:italic; color:var(--gold-700); }
  .hero-copy p{ font-size:17px; max-width:440px; margin-bottom:32px; }

  /* ---------- section shell ---------- */
  section{ padding:min(11vw,120px) 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .rule{ width:64px; height:1px; background:var(--gold-500); margin:0 0 22px; }
  .rule.center{ margin-left:auto; margin-right:auto; }

  /* La aparición al hacer scroll la enciende el JS. Si el JS no corre (error,
     no cargó, navegador antiguo) el contenido NO puede quedar invisible: por eso
     solo se esconde cuando script.js marcó <html class="js">. */
  .reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal{ opacity:0; transform:translateY(26px); }
  .js .reveal.is-visible{ opacity:1; transform:none; }

  /* ---------- gemas reales ---------- */
  .gemas{ background:var(--white); }
  .gemas-grid{
    display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:auto auto; gap:16px;
    max-width:860px; margin:0 auto;
  }
  .gemas-grid figure{ margin:0; position:relative; overflow:hidden; }
  .gemas-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gemas-main{ grid-column:1; grid-row:1 / span 2; }
  .gemas-mono{ grid-column:2; grid-row:1; aspect-ratio:16/10; }
  .gemas-duo{ grid-column:2; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .gemas-small{ aspect-ratio:1/1; }

  /* Safari 14 y anteriores no entienden aspect-ratio: estas figuras quedarían
     con 0 de alto y la sección se vería vacía. Sin aspect-ratio, cada foto usa
     su alto natural: la retícula queda menos pareja, pero se ve completa. */
  @supports not (aspect-ratio:1/1){
    .gemas-grid img{ height:auto; }
    .gemas-main, .gemas-mono, .gemas-small{ height:auto; }
  }

  /* ---------- coleccion / carousel ---------- */
  .coleccion{ background:var(--cream-100); }
  .carousel-wrap{ max-width:1040px; margin:0 auto; }
  .carousel-track{
    display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:16px 6px 24px; scrollbar-width:none;
    cursor:grab; user-select:none; -webkit-user-select:none;
  }
  .carousel-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
  .carousel-track::-webkit-scrollbar{ display:none; }
  .card{
    flex:0 0 calc(33.333% - 11px); scroll-snap-align:start;
    border-radius:20px;
    transition:transform .45s var(--ease), box-shadow .45s var(--ease);
    transform-origin:center;
    /* La card ya tiene su propia animación al tocarla; el flash gris nativo estorba */
    -webkit-tap-highlight-color:transparent;
  }
  .card-inner{
    background:var(--white); border:1px solid var(--line); border-radius:20px;
    overflow:hidden; height:100%;
  }
  .card-media{ aspect-ratio:4/4.6; overflow:hidden; background:var(--cream-200); position:relative; }
  .card-media img{ width:100%; height:100%; object-fit:cover; }
  /* Mismo motivo que en gemas: 115% = 4.6/4 escrito como padding (Safari ≤14) */
  @supports not (aspect-ratio:4/4.6){
    .card-media{ height:0; padding-bottom:115%; }
    .card-media img{ position:absolute; top:0; left:0; }
  }
  .card-name{
    position:absolute; left:0; right:0; bottom:0;
    padding:28px 12px 14px; text-align:center;
    font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600;
    color:var(--white);
    background:linear-gradient(180deg, transparent 0%, rgba(45,38,32,0.62) 100%);
  }

  /* focus-card hover animation: desktop pointer */
  @media (hover:hover){
    .carousel-track:hover .card{ transform:scale(0.95); }
    .carousel-track .card:hover{
      transform:scale(1.07);
      box-shadow:var(--shadow-soft);
      z-index:2;
    }
  }
  /* focus-card tap animation: touch devices, driven by .is-active/.is-interacting from script.js */
  @media (hover:none){
    .carousel-track.is-interacting .card{ transform:scale(0.95); }
    .carousel-track.is-interacting .card.is-active{
      transform:scale(1.07);
      box-shadow:var(--shadow-soft);
      z-index:2;
    }
  }

  /* ---------- joyas a la medida ---------- */
  .medida{ background:var(--white); padding-top:4rem; padding-bottom:4rem; }
  .medida-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }

  .medida-frame{
    margin:0; position:relative;
    padding:10px; background:var(--white);
    border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow-soft);
  }
  .medida-render{ display:block; width:100%; aspect-ratio:1/1; border-radius:8px; object-fit:cover; }
  .medida-badge{
    position:absolute; left:24px; bottom:24px;
    padding:8px 14px; border-radius:999px;
    background:rgba(45,38,32,0.55);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(201,168,127,0.55);
    color:var(--cream-50);
    font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:600;
    letter-spacing:0.16em; text-transform:uppercase;
  }

  .eyebrow-line{ display:inline-flex; align-items:center; gap:10px; }
  .eyebrow-rule{ display:inline-block; width:28px; height:1px; background:var(--gold-500); flex:none; }
  .eyebrow-rule-after{ display:none; }
  .medida-copy h2{ font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.05; margin-top:14px; }
  .medida-lead{ margin-top:20px; max-width:34ch; font-size:17px; }

  .medida-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:20px 28px; margin-top:32px; }
  .btn-whatsapp{
    display:inline-flex; align-items:center; gap:10px; flex:none;
    min-height:44px; padding:14px 28px;
    background:var(--ink-900); color:var(--white);
    border:none; border-radius:999px; cursor:pointer; text-decoration:none;
    font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px;
    letter-spacing:0.06em; text-transform:uppercase;
    box-shadow:var(--shadow-soft);
    transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .btn-whatsapp:hover{ background:var(--gold-700); transform:translateY(-2px); box-shadow:0 22px 40px -18px rgba(142,115,91,0.55); }
  .btn-whatsapp:active{ transform:translateY(0); }
  .btn-whatsapp:focus-visible{ outline:2px solid var(--gold-700); outline-offset:3px; }
  .btn-whatsapp.btn-block{ width:100%; justify-content:center; }

  @media (min-width:900px){
    .medida-grid{
      grid-template-columns:42fr 58fr;
      grid-template-rows:auto auto;
      gap:14px 4rem;
    }
    .eyebrow-line{ grid-column:2; grid-row:1; justify-content:flex-start; margin:0; }
    .medida-visual{ grid-column:1; grid-row:1 / span 2; }
    .medida-copy{ grid-column:2; grid-row:2; }
  }

  /* ---------- modal: diseña tu joya ---------- */
  .modal-overlay{
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:100;
    display:flex; align-items:center; justify-content:center; padding:24px;
    background:rgba(28,26,23,0.55);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .modal-overlay[hidden]{ display:none; }
  .modal-overlay:not([hidden]){ animation:modal-fade .25s var(--ease); }
  @keyframes modal-fade{ from{ opacity:0; } to{ opacity:1; } }

  .modal{
    position:relative;
    width:min(440px,90vw); max-height:85vh; max-height:85dvh; overflow-y:auto;
    background:var(--cream-50); border-radius:16px;
    padding:36px 30px 30px;
    box-shadow:0 40px 80px -30px rgba(28,26,23,0.55);
  }
  .modal-close{
    position:absolute; top:8px; right:8px;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer; color:var(--ink-700);
    transition:background .25s, color .25s;
  }
  .modal-close:hover{ background:var(--cream-200); color:var(--ink-900); }
  .modal-close:focus-visible{ outline:2px solid var(--gold-700); outline-offset:2px; }
  .modal-close .icon{ width:18px; height:18px; }

  .modal h3{ font-size:26px; margin:0 0 6px; padding-right:36px; }
  .modal-sub{ font-size:13.5px; color:var(--ink-500); margin:0 0 22px; }

  .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
  .field label{
    font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700;
    color:var(--ink-900);
  }
  .field input, .field select{
    min-height:52px; padding:12px 20px;
    border:1.5px solid var(--ink-900); border-radius:999px;
    background:var(--white); color:var(--ink-900);
    font-family:'Montserrat',sans-serif; font-size:14px; font-weight:600;
    transition:border-color .25s, box-shadow .25s;
  }
  .field input:focus-visible, .field select:focus-visible{
    outline:none; border-color:var(--gold-700); box-shadow:0 0 0 3px rgba(180,148,116,0.25);
  }
  .field.has-error input, .field.has-error select{ border-color:var(--error); }
  .field-error{ font-size:12px; color:var(--error); min-height:14px; }
  .field-error:empty{ display:none; }

  /* ---------- historia ---------- */
  .historia{ background:var(--cream-100); padding-top:min(8vw,84px); padding-bottom:min(8vw,84px); }
  .historia-grid{ display:grid; grid-template-columns:42fr 58fr; gap:48px; align-items:center; }
  /* En escritorio el video llena su columna: antes tenía un tope de 340px
     dentro de una columna de 526px, lo que dejaba 93px muertos a cada lado
     y lo hacía ver pequeño al lado del render 3D. */
  /* ====== ENCUADRE DEL VIDEO: los 4 valores de abajo son las perillas ======
     El video original es vertical 720x1280 (9:16) y el marco es 3/4, más ancho:
     por eso sobra alto y se recorta arriba/abajo.

     --video-ratio : forma del marco. 3/4 (actual) · 2/3 más alto · 1/1 cuadrado.
                     Entre más alto el marco, menos recorte vertical.
     --video-y     : encuadre vertical. 0%=pega arriba · 50%=centro · 100%=abajo.
     --video-x     : encuadre horizontal (mover a los lados).
                     0%=izquierda · 50%=centro · 100%=derecha.
     --video-zoom  : acerca el contenido. 1 = sin acercar.
                     OJO: con el marco actual sobra alto pero NO ancho, así que
                     --video-x solo se nota si --video-zoom es mayor que 1
                     (ej. 1.15), que es lo que crea el margen para moverlo a los
                     lados. Sin zoom, la única perilla que mueve algo es --video-y.

     El poster usa exactamente el mismo encuadre que el video, así que al pulsar
     play la imagen no "salta". ====================================== */
  .video-frame{
    --video-ratio:3/4;
    --video-x:50%;
    --video-y:50%;
    --video-zoom:1;

    position:relative;
    margin:0;
    aspect-ratio:var(--video-ratio); overflow:hidden;
    border-radius:24px; box-shadow:var(--shadow-soft);
    background:var(--ink-900);
    /* Safari pinta el video en una capa aparte y a veces se salta el recorte
       del contenedor (esquinas cuadradas). Aislarlo en su propio contexto
       ayuda, y el border-radius del propio video de abajo lo garantiza. */
    isolation:isolate;
  }
  .video-frame video{
    display:block; width:100%; height:100%;
    border-radius:inherit;
    object-fit:cover;
    object-position:var(--video-x) var(--video-y);
    /* El mismo punto de anclaje en los dos: al acercar, la zona elegida con
       --video-x/--video-y se queda quieta en vez de escaparse del marco. */
    transform:scale(var(--video-zoom));
    transform-origin:var(--video-x) var(--video-y);
  }
  /* Safari 14 y anteriores ignoran aspect-ratio: sin esto el marco mide 0 de
     alto y el video desaparece. El 133.33% es el 3/4 escrito a la vieja usanza. */
  @supports not (aspect-ratio:3/4){
    .video-frame{ height:0; padding-bottom:133.333%; }
    .video-frame video{ position:absolute; top:0; left:0; }
  }

  /* Botón propio, en la esquina: deja ver el poster completo. Al pulsarlo se
     activan los controles nativos y él desaparece. */
  .video-play{
    position:absolute; left:14px; bottom:14px; z-index:2;
    width:44px; height:44px; padding:0;
    border:none; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
    box-shadow:0 6px 18px -6px rgba(28,26,23,0.7);
    transition:transform .3s var(--ease), opacity .25s var(--ease);
    -webkit-tap-highlight-color:transparent;
  }
  /* +2px: un triángulo centrado geométricamente se ve corrido a la izquierda */
  .video-play svg{ width:17px; height:17px; fill:var(--white); margin-left:2px; }
  .video-play:hover{ transform:scale(1.08); }
  .video-play:focus-visible{ outline:2px solid var(--white); outline-offset:2px; }
  .video-frame.is-playing .video-play{ opacity:0; visibility:hidden; }
  /* display:flex le gana al atributo hidden, así que hay que decirlo aparte
     (script.js lo oculta si el video no se puede cargar) */
  .video-play[hidden]{ display:none; }

  .historia-copy{ position:relative; }
  .historia-text{ margin-top:20px; }

  /* ---------- reseñas de google ---------- */
  .reviews{ background:var(--white); }
  .reviews-score{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:18px;
  }
  .reviews-stars{ color:var(--gold-500); font-size:16px; letter-spacing:2px; }
  .reviews-score-label{
    font-family:'Montserrat',sans-serif; font-size:12px; color:var(--ink-500);
    letter-spacing:0.03em;
  }

  .reviews-carousel{
    display:grid; max-width:640px; margin:44px auto 0;
  }
  /* Las 5 reseñas están apiladas en la misma celda. Con solo opacity:0 las
     ocultas siguen existiendo para el lector de pantalla, que leía las cinco
     seguidas como si fueran un solo bloque. visibility:hidden las saca del
     árbol de accesibilidad sin romper la transición de opacidad. */
  .review-slide{
    grid-area:1/1;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .6s var(--ease), visibility .6s var(--ease);
    padding:0 6px;
  }
  .review-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

  .review-card{
    position:relative; overflow:hidden;
    background:var(--white); border:1px solid var(--line); border-radius:20px;
    box-shadow:var(--shadow-soft);
    padding:34px 30px 30px;
  }
  .review-card::before{
    content:'\201C'; position:absolute; top:-18px; left:20px;
    font-family:'Cormorant Garamond',serif; font-size:110px; line-height:1;
    color:var(--gold-300); opacity:0.28; pointer-events:none;
  }
  .review-card-head{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .review-avatar{
    flex:none; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg, var(--gold-300) 0%, var(--gold-700) 100%);
    color:var(--white); font-family:'Montserrat',sans-serif; font-size:15px; font-weight:700;
  }
  .review-card-headtext{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .review-google-badge{ flex:none; width:20px; height:20px; }
  .review-slide .review-stars{ font-size:13px; letter-spacing:2px; }
  .review-text{
    position:relative;
    font-family:'Cormorant Garamond',serif; font-style:italic;
    font-size:clamp(18px,2.4vw,22px); line-height:1.55; color:var(--ink-900);
  }
  .review-author{
    font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:700;
    color:var(--ink-900);
  }

  .reviews-dots{ display:flex; align-items:center; justify-content:center; gap:0; margin-top:16px; }
  /* El botón es un área táctil de 22x40 (el dedo la acierta); el punto visible
     de 8px lo dibuja el ::before, así el diseño no cambia pero sí se puede tocar. */
  .reviews-dots button{
    width:22px; height:40px; padding:0; border:none; background:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border-radius:6px;
  }
  .reviews-dots button::before{
    content:''; width:8px; height:8px; border-radius:50%;
    background:var(--line);
    transition:background .3s, transform .3s;
  }
  .reviews-dots button.is-active::before{ background:var(--gold-700); transform:scale(1.35); }
  .reviews-dots button:focus-visible{ outline:2px solid var(--gold-700); outline-offset:-2px; }

  .reviews-link{
    display:block; text-align:center; margin-top:36px;
    font-family:'Montserrat',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-900);
    text-decoration:none; border-bottom:1px solid var(--gold-500);
    width:fit-content; margin-left:auto; margin-right:auto; padding-bottom:3px;
    transition:color .3s, border-color .3s;
  }
  .reviews-link:hover{ color:var(--gold-700); border-color:var(--gold-700); }
  .reviews-link:focus-visible{ outline:2px solid var(--gold-700); outline-offset:3px; }

  /* ---------- footer ---------- */
  footer{ background:var(--brown-900); color:var(--cream-200); padding:40px 0; }
  .footer-mini{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .footer-logo{ height:26px; width:auto; display:block; }
  .footer-address{ color:rgba(250,248,246,0.6); font-size:13px; margin:0; }
  .footer-social{ display:flex; justify-content:center; gap:12px; }
  .footer-social a{
    width:40px; height:40px; border-radius:50%; border:1px solid rgba(250,248,246,0.25);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .3s, background .3s;
  }
  .footer-social a:hover{ border-color:var(--gold-300); background:rgba(250,248,246,0.08); }
  .footer-social img{ width:17px; height:17px; display:block; }
  .footer-copy{ font-size:11.5px; color:rgba(250,248,246,0.45); margin-top:4px; }

  @media (max-width: 980px){
    .hero{ min-height:clamp(520px,82vh,640px); min-height:clamp(520px,82dvh,640px); }

    /* La modelo pasa a ser FONDO a pantalla completa: cover = sin huecos jamás */
    .hero-figure{
      top:0; right:0; bottom:0; left:0;
      align-items:stretch;
      justify-content:stretch;
    }
    .hero-figure img{
      width:100%;
      height:100%;
      max-width:none;
      object-fit:cover;
      object-position:72% top;   /* encuadra cara/joyas; ajustar % si hace falta */
    }

    /* Velo diagonal: opaco a la izquierda (texto), transparente a la derecha (modelo) */
    .hero-veil{
      background:linear-gradient(105deg,
        rgba(250,248,246,0.96) 0%,
        rgba(250,248,246,0.88) 34%,
        rgba(250,248,246,0.45) 60%,
        rgba(45,38,32,0.15)    100%);
    }

    /* Panel de vidrio esmerilado detrás del texto: difumina la foto solo ahí
       (la modelo y las joyas quedan nítidas en el resto de la imagen) */
    .hero-copy{
      padding:28px 24px;
      background:rgba(250,248,246,0.55);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-radius:18px;
    }
    .gemas-grid{ max-width:520px; gap:10px; }
    .gemas-duo{ gap:10px; }
    .card{ flex:0 0 60%; }
    .medida-frame{ max-width:380px; margin:0 auto; }
    .nav-overlay{
      display:block;
      position:fixed; top:0; right:0; bottom:0; left:0; z-index:65;
      background:rgba(28,26,23,0.5);
      backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
      opacity:0; visibility:hidden;
      transition:opacity .35s var(--ease), visibility .35s var(--ease);
    }
    .nav-overlay.is-open{ opacity:1; visibility:visible; }

    nav.primary-nav{
      position:fixed; top:0; right:0; bottom:0; z-index:70;
      width:min(78vw,320px);
      background:var(--cream-50);
      flex-direction:column; align-items:stretch; gap:0;
      padding:80px 0 24px;
      box-shadow:-24px 0 50px -24px rgba(45,38,32,0.4);
      transform:translateX(100%);
      transition:transform .4s var(--ease);
      overflow-y:auto;
    }
    nav.primary-nav.is-open{ transform:translateX(0); }
    nav.primary-nav a{ padding:16px 28px; width:100%; border-top:1px solid var(--line); }
    nav.primary-nav a:first-of-type{ border-top:none; }
    .nav-close{
      position:absolute; top:18px; right:18px;
      width:40px; height:40px; display:flex; align-items:center; justify-content:center;
      background:none; border:none; cursor:pointer; color:var(--ink-900);
    }
    .nav-close:hover{ color:var(--gold-700); }
    .nav-close:focus-visible{ outline:2px solid var(--gold-700); outline-offset:2px; }
    .nav-close .icon{ width:20px; height:20px; }
    .menu-toggle{ display:flex; }
  }

  /* ---------- phones ---------- */
  @media (max-width:599px){
    section{ padding:52px 0; }

    .hero-copy h1{ font-size:clamp(1.9rem,9vw,2.6rem); margin-bottom:16px; }
    .hero-copy p{ font-size:15.5px; margin-bottom:26px; }
    .btn-gold{ padding:14px 30px; font-size:11.5px; width:100%; justify-content:center; }

    /* Encuadre vertical: prioriza rostro y joyas en pantalla angosta */
    .hero-figure img{
      object-position:66% top;
    }

    /* Velo un poco más fuerte por el menor ancho disponible para el texto */
    .hero-veil{
      background:linear-gradient(120deg,
        rgba(250,248,246,0.97) 0%,
        rgba(250,248,246,0.90) 40%,
        rgba(250,248,246,0.42) 70%,
        rgba(45,38,32,0.14)    100%);
    }

    h2{ font-size:clamp(1.7rem,7vw,2.3rem); }
    .section-head{ margin-bottom:36px; }

    .gemas-grid{ grid-template-columns:1fr; max-width:360px; gap:10px; }
    .gemas-main{ grid-column:1; grid-row:auto; aspect-ratio:16/10; }
    .gemas-mono{ grid-column:1; grid-row:auto; }
    .gemas-duo{ grid-column:1; grid-row:auto; gap:10px; }

    .carousel-track{ padding:12px 4px 20px; gap:12px; }
    .card{ flex:0 0 68%; }
    .card-name{ font-size:22px; padding:24px 10px 14px; }

    /* ---- Móvil: imagen a la izquierda, todo el texto a la derecha.
       Mitad y mitad para que la pieza se aprecie; el texto se acortó
       justamente para caber cómodo en esa mitad. ---- */
    .medida{ padding-top:36px; padding-bottom:36px; }
    .medida-grid{
      grid-template-columns:1fr 1fr;
      gap:14px 16px;
      align-items:center;
    }
    .eyebrow-line{ grid-column:1 / -1; grid-row:1; justify-content:center; margin:0; }
    .medida-visual{ grid-column:1; grid-row:2; }
    /* Menos marco = más foto, que es lo escaso en esta columna */
    .medida-frame{ max-width:none; margin:0; padding:6px; }
    .medida-badge{ left:10px; bottom:10px; padding:5px 9px; font-size:8.5px; }
    .medida-copy{ grid-column:2; grid-row:2; text-align:left; }
    .medida-copy h2{ font-size:clamp(1.05rem,4.4vw,1.4rem); margin-top:0; }
    .medida-lead{ max-width:none; margin:10px 0 0; font-size:13px; line-height:1.55; }
    .medida-cta{ justify-content:flex-start; margin-top:14px; }
    .btn-whatsapp{ width:100%; justify-content:center; padding:12px 16px; font-size:11px; }

    .modal{ padding:28px 22px 24px; }
    /* 16px es el mínimo que evita que iOS Safari haga zoom al enfocar el campo */
    .field input, .field select{ min-height:48px; padding:10px 18px; font-size:16px; }

    /* ---- Mismo patrón: video izquierda, todo el texto derecha ---- */
    .historia{ padding-top:44px; padding-bottom:44px; }
    .historia-grid{
      grid-template-columns:1fr 1fr;
      gap:16px;
      align-items:center;
    }
    .video-frame{
      grid-column:1; grid-row:1;
      max-width:none; margin:0; border-radius:16px;
    }
    /* Se mantiene en 44px (mínimo táctil), solo se pega más a la esquina */
    .video-play{ left:9px; bottom:9px; }
    .historia-copy{ grid-column:2; grid-row:1; }
    .historia-head .rule{ margin-bottom:10px; }
    .historia-copy h2{ font-size:clamp(1.05rem,4.4vw,1.4rem); }
    .historia-text{ margin-top:10px; font-size:13px; line-height:1.55; }

    .review-card{ padding:28px 20px 24px; }
    .review-card::before{ font-size:80px; top:-12px; left:12px; }
    .review-avatar{ width:38px; height:38px; font-size:13px; }
  }

  /* ---------- tablets: imagen izquierda + texto derecha ----------
     Solo desde 600px: por debajo de eso las dos columnas dejan ~165px a cada
     una y ni la imagen ni el texto se aprecian, así que ahí se apilan. */
  @media (min-width:600px) and (max-width:899px){
    .medida-grid{
      grid-template-columns:42fr 58fr;
      grid-template-rows:auto auto;
      gap:1.4rem 1.8rem;
      align-items:center;
    }
    .medida-frame{ max-width:none; margin:0; }
    .medida-badge{ left:14px; bottom:14px; padding:6px 12px; font-size:9.5px; }
    .medida-copy{ text-align:left; }

    /* Eyebrow ocupa su propia fila arriba, centrada respecto a todo el bloque
       (no depende de position:absolute, así no se rompe con la animación .reveal) */
    .eyebrow-line{ grid-column:1 / -1; grid-row:1; justify-content:center; margin:0; }
    .medida-visual{ grid-column:1; grid-row:2; }
    .medida-copy{ grid-column:2; grid-row:2; }
    .eyebrow-rule-after{ display:inline-block; }
    .medida-copy h2{ font-size:clamp(1.5rem,3.6vw,2.1rem); }
    .medida-lead{ margin-left:0; margin-right:0; max-width:none; font-size:14px; line-height:1.6; }
    .medida-cta{ justify-content:flex-start; margin-top:20px; }
    .btn-whatsapp{ width:auto; padding:12px 22px; font-size:11.5px; }
  }

  /* ---------- tablets: video izquierda + texto derecha ---------- */
  @media (min-width:600px) and (max-width:899px){
    .historia-grid{ grid-template-columns:42fr 58fr; gap:1.8rem; align-items:center; }
    .video-frame{ max-width:none; margin:0; border-radius:18px; }
    .historia-copy h2{ font-size:clamp(1.4rem,3.2vw,1.9rem); }
    /* Apunta al párrafo, no a cualquier <p>: antes también encogía el eyebrow */
    .historia-text{ font-size:14px; line-height:1.6; }
  }