*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    /* los controles de formulario no heredan la fuente: el navegador les impone
       Arial. Sin esto cualquier button/input se sale del sistema tipográfico. */
    button, input, select, textarea { font-family:inherit; color:inherit; }

    /* ═══════════════════════════════════════════════════════════
       TOKENS · Meraki — paleta leída de los flyers de Claudia
    ═══════════════════════════════════════════════════════════ */
    :root {
      /* color */
      --papel:      #FBF8F3;  /* crema de fondo */
      --papel-alto: #FFFFFF;  /* tarjetas */
      --calido:     #F3EADD;  /* bandas, chips, brush */
      --arena:      #D9C3A9;  /* divisores, trazos */
      --arena-tenue:#EBDFCE;
      --oro:        #C08B3E;  /* iconos, líneas, acento de marca */
      --bronce:     #A8853F;  /* el isotipo: un oro mate, sin brillo */
      --oro-claro:  #E0B872;
      --oro-tenue:  rgba(192,139,62,.14);
      --tinta:      #3B2317;  /* titulares */
      --tinta-2:    #6B4A34;  /* texto secundario */
      --tinta-3:    #9A8171;  /* texto terciario */
      --cuarzo:     #E8D3CF;  /* acento rosa suave */
      --salvia:     #A9B49A;  /* acento verde natural */

      /* tipografía */
      --display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
      --serif:   'Cormorant Garamond', Georgia, serif;
      --script:  'Parisienne', 'Snell Roundhand', cursive;
      --texto:   'Jost', system-ui, -apple-system, sans-serif;

      /* forma */
      --r-sm: 10px;
      --r-md: 16px;
      --r-lg: 26px;
      --r-xl: 34px;
      --sombra:      0 1px 2px rgba(59,35,23,.03), 0 8px 26px rgba(59,35,23,.055);
      --sombra-alta: 0 4px 10px rgba(59,35,23,.05), 0 24px 50px rgba(59,35,23,.11);
      --borde: 1px solid rgba(192,139,62,.22);

      /* movimiento */
      --t-snap:   110ms cubic-bezier(.2,0,0,1);
      --t-base:   220ms cubic-bezier(.22,.72,.24,1);
      --t-suave:  420ms cubic-bezier(.22,.72,.24,1);
      --t-spring: 380ms cubic-bezier(.34,1.4,.64,1);

      /* medidas */
      --ancho: 1080px;
      --dock-h: 74px;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:.01ms !important; animation-iteration-count:1 !important;
        transition-duration:.01ms !important; scroll-behavior:auto !important;
      }
    }

    html { height:100%; scroll-behavior:smooth; scroll-padding-top:88px; background:var(--papel); }

    body {
      min-height:100%;
      font-family:var(--texto);
      font-weight:300;
      color:var(--tinta-2);
      background:var(--papel);
      /* halo cálido muy leve arriba, como el papel de los flyers */
      background-image:
        radial-gradient(120% 60% at 50% -10%, #FFFDF9 0%, rgba(255,253,249,0) 60%),
        radial-gradient(80% 40% at 100% 8%, rgba(232,211,207,.30) 0%, rgba(232,211,207,0) 65%),
        radial-gradient(70% 35% at 0% 22%, rgba(192,139,62,.07) 0%, rgba(192,139,62,0) 60%);
      /* Sin background-attachment:fixed a propósito: Safari en iOS lo ignora
         y en el resto obliga a repintar la pantalla entera en cada scroll.
         Como el degradado es solo un halo del encabezado, no se pierde nada
         dejándolo rodar con la página. */
      background-repeat:no-repeat;
      line-height:1.6;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
    }

    body.sin-scroll { overflow:hidden; }

    a { color:inherit; text-decoration:none; }
    img { max-width:100%; display:block; }

    .env { width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:22px; }

    /* ── tipografía de apoyo ─────────────────────────────────── */
    .kicker {
      font-family:var(--texto); font-weight:400;
      font-size:.66rem; letter-spacing:.30em; text-transform:uppercase;
      color:var(--oro);
    }
    .script { font-family:var(--script); font-weight:400; color:var(--oro); line-height:1.1; }

    h1,h2,h3 { font-family:var(--display); color:var(--tinta); font-weight:500; line-height:1.12; }

    /* ── ornamento: corazón entre dos hairlines, como los flyers ─ */
    .divisor { display:flex; align-items:center; gap:14px; justify-content:center; margin:26px auto; max-width:340px; }
    .divisor::before, .divisor::after {
      content:''; flex:1; height:1px;
      background:linear-gradient(90deg, transparent, var(--arena), transparent);
    }
    .divisor svg { width:15px; height:15px; color:var(--oro); flex:none; }

    /* ── banda tipo brochazo detrás de las etiquetas de sección ── */
    .brocha {
      display:inline-block; position:relative;
      /* el trazo es un ::before con z-index:-1. Sin un contexto de apilamiento
         propio se va detrás del fondo de la página y desaparece en las
         secciones que no traen z-index. */
      isolation:isolate;
      padding:.62em 2.2em;
      color:var(--tinta); font-weight:500;
      font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
    }
    .brocha::before {
      content:''; position:absolute; inset:0; z-index:-1;
      background:var(--calido);
      /* bordes irregulares: imita el trazo de pincel de los flyers */
      border-radius:46% 54% 52% 48% / 58% 44% 56% 42%;
      transform:scaleY(1.06);
    }

    /* ── botánica dorada de las esquinas ─────────────────────── */
    .botanica { position:absolute; color:var(--oro); opacity:.30; pointer-events:none; z-index:0; }
    .botanica.b-tl { top:-14px; left:-42px; width:190px; transform:rotate(-6deg); }
    .botanica.b-tr { top:-26px; right:-50px; width:210px; transform:scaleX(-1) rotate(-10deg); }
    .botanica.b-bl { bottom:-30px; left:-56px; width:170px; transform:scaleY(-1) rotate(6deg); opacity:.20; }

    /* ── revelado al hacer scroll ────────────────────────────── */
    .reveal { opacity:0; transform:translateY(22px); transition:opacity var(--t-suave), transform var(--t-suave); }
    .reveal.visible { opacity:1; transform:none; }

    /* ═══════════════════════════════════════════════════════════
       SPLASH
    ═══════════════════════════════════════════════════════════ */
    #splash {
      position:fixed; inset:0; z-index:200;
      display:grid; place-items:center;
      background:var(--papel);
      transition:opacity 620ms ease, visibility 620ms;
    }
    #splash.fuera { opacity:0; visibility:hidden; }
    #splash .marca { text-align:center; animation:splashIn 900ms var(--t-suave) both; }
    #splash .marca .logo { display:block; width:104px; margin:0 auto 18px; color:var(--bronce); }
    #splash .marca .nombre {
      font-family:var(--display); font-size:1.5rem; letter-spacing:.16em;
      color:var(--tinta); text-transform:uppercase; font-weight:500;
    }
    #splash .marca .sub { font-family:var(--texto); font-size:.68rem; letter-spacing:.42em; color:var(--oro); text-transform:uppercase; margin-top:8px; }
    @keyframes splashIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

    /* ═══════════════════════════════════════════════════════════
       HEADER
    ═══════════════════════════════════════════════════════════ */
    #cabecera {
      position:fixed; top:0; left:0; right:0; z-index:90;
      padding-top:env(safe-area-inset-top);
      transition:background var(--t-base), box-shadow var(--t-base), backdrop-filter var(--t-base);
    }
    #cabecera.pegado {
      background:rgba(251,248,243,.86);
      backdrop-filter:saturate(150%) blur(16px);
      -webkit-backdrop-filter:saturate(150%) blur(16px);
      box-shadow:0 1px 0 rgba(192,139,62,.16);
    }
    #cabecera .fila { display:flex; align-items:center; justify-content:space-between; height:66px; }
    #cabecera .marca { display:flex; align-items:center; gap:11px; }
    #cabecera .marca .logo { width:38px; color:var(--bronce); flex:none; }
    #cabecera .marca .txt { min-width:0; }
    #cabecera .marca .txt .n {
      font-family:var(--display); font-size:.86rem; letter-spacing:.14em;
      text-transform:uppercase; color:var(--tinta); font-weight:600; line-height:1;
    }
    #cabecera .marca .txt .s {
      font-family:var(--texto); font-size:.56rem; letter-spacing:.34em;
      text-transform:uppercase; color:var(--oro); margin-top:4px;
    }

    .btn-menu {
      width:44px; height:44px; border:none; background:transparent;
      display:grid; place-items:center; cursor:pointer; color:var(--tinta);
      border-radius:50%; transition:background var(--t-snap);
    }
    .btn-menu:hover { background:var(--oro-tenue); }
    .btn-menu span { display:block; width:20px; height:1.5px; background:currentColor; border-radius:2px; transition:transform var(--t-base), opacity var(--t-base); }
    .btn-menu span + span { margin-top:5px; }
    .btn-menu[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
    .btn-menu[aria-expanded="true"] span:nth-child(2) { opacity:0; }
    .btn-menu[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

    /* ── drawer de navegación ────────────────────────────────── */
    #velo {
      position:fixed; inset:0; z-index:95; background:rgba(59,35,23,.34);
      backdrop-filter:blur(3px); opacity:0; visibility:hidden;
      transition:opacity var(--t-base), visibility var(--t-base);
    }
    #velo.abierto { opacity:1; visibility:visible; }

    #cajon {
      position:fixed; top:0; right:0; bottom:0; z-index:96;
      width:min(86vw, 340px);
      background:var(--papel); border-left:var(--borde);
      padding:calc(env(safe-area-inset-top) + 26px) 30px 30px;
      transform:translateX(102%); transition:transform var(--t-suave);
      display:flex; flex-direction:column;
      box-shadow:var(--sombra-alta);
      overflow-y:auto;
    }
    #cajon.abierto { transform:none; }
    #cajon .cerrar { align-self:flex-end; margin-bottom:22px; }
    #cajon nav { display:flex; flex-direction:column; gap:2px; }
    #cajon nav a {
      font-family:var(--display); font-size:1.28rem; color:var(--tinta);
      padding:13px 0; border-bottom:1px solid rgba(192,139,62,.14);
      display:flex; align-items:center; justify-content:space-between;
      transition:color var(--t-snap), padding-left var(--t-base);
    }
    #cajon nav a:hover { color:var(--oro); padding-left:6px; }
    #cajon nav a svg { width:14px; color:var(--arena); }
    #cajon .pie { margin-top:auto; padding-top:28px; }
    #cajon .pie .dato { display:flex; align-items:center; gap:10px; font-size:.82rem; padding:7px 0; color:var(--tinta-2); }
    #cajon .pie .dato svg { width:16px; color:var(--oro); flex:none; }

    /* ═══════════════════════════════════════════════════════════
       BOTONES
    ═══════════════════════════════════════════════════════════ */
    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:9px;
      font-family:var(--texto); font-weight:400;
      font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
      padding:15px 28px; border-radius:100px; border:1px solid transparent;
      cursor:pointer; transition:transform var(--t-snap), box-shadow var(--t-base), background var(--t-base), color var(--t-base);
      white-space:nowrap;
    }
    .btn:active { transform:scale(.975); }
    .btn svg { width:15px; flex:none; }

    .btn-oro {
      background:linear-gradient(135deg, var(--oro-claro), var(--oro));
      color:#fff; box-shadow:0 6px 18px rgba(192,139,62,.28);
    }
    .btn-oro:hover { box-shadow:0 10px 26px rgba(192,139,62,.36); }

    .btn-tinta { background:var(--tinta); color:var(--papel); }
    .btn-tinta:hover { background:#2C190F; }

    .btn-linea { background:transparent; border-color:var(--arena); color:var(--tinta); }
    .btn-linea:hover { border-color:var(--oro); color:var(--oro); background:rgba(192,139,62,.05); }

    .btn-wa { background:#25D366; color:#fff; box-shadow:0 6px 18px rgba(37,211,102,.28); }
    .btn-wa:hover { background:#1FBF5B; }

    .btn-bloque { width:100%; }

    /* ═══════════════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════════════ */
    #hero { position:relative; padding:calc(env(safe-area-inset-top) + 108px) 0 56px; overflow:hidden; }
    #hero .env { position:relative; z-index:1; }
    #hero .rejilla { display:grid; gap:38px; align-items:center; }

    .pastilla {
      display:inline-flex; align-items:center; gap:9px;
      background:var(--papel-alto); border:var(--borde);
      border-radius:100px; padding:8px 17px 8px 12px;
      box-shadow:var(--sombra); margin-bottom:22px;
    }
    .pastilla svg { width:16px; color:var(--oro); }
    .pastilla span { font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-2); }

    #hero h1 { font-size:clamp(2.5rem, 9.5vw, 4.1rem); letter-spacing:-.005em; }
    #hero h1 .l1 { display:block; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
    #hero h1 .l2 { display:block; font-family:var(--script); font-size:1.02em; color:var(--oro); font-weight:400; margin-top:-.06em; text-transform:none; letter-spacing:0; }

    #hero .entrada { font-size:1.02rem; color:var(--tinta-2); max-width:34ch; margin-top:20px; }

    #hero .acciones { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

    #hero .datos { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; padding-top:22px; border-top:1px solid rgba(192,139,62,.18); }
    #hero .datos .d { display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--tinta-3); }
    #hero .datos .d svg { width:14px; color:var(--oro); flex:none; }

    /* marco de la foto principal.
       Apilado (una sola columna) la foto se comía la pantalla entera: a 768 px
       de ancho, un 3:4 mide 1024 px de alto. Con tope se mantiene en
       proporción de retrato sin volverse un muro. */
    .marco { position:relative; width:100%; max-width:400px; margin-inline:auto; }
    .marco .foto {
      position:relative; z-index:1;
      border-radius:190px 190px var(--r-lg) var(--r-lg); /* arco tipo nicho */
      overflow:hidden; aspect-ratio:3/4;
      background:linear-gradient(160deg, var(--calido), var(--cuarzo));
      box-shadow:var(--sombra-alta);
    }
    .marco .foto img { width:100%; height:100%; object-fit:cover; }
    /* hilo dorado desplazado detrás del arco */
    .marco::after {
      content:''; position:absolute; z-index:0;
      inset:16px -16px -16px 16px;
      border:1px solid var(--oro); opacity:.42;
      border-radius:190px 190px var(--r-lg) var(--r-lg);
    }
    .marco .sello {
      position:absolute; z-index:2; left:50%; bottom:-22px; transform:translateX(-50%);
      background:var(--papel-alto); border:var(--borde); border-radius:100px;
      padding:11px 22px; box-shadow:var(--sombra-alta); white-space:nowrap;
      font-family:var(--script); font-size:1.16rem; color:var(--oro);
    }

    /* marcador de foto pendiente: se ve intencional, no roto */
    .hueco {
      position:absolute; inset:0; display:grid; place-content:center; gap:10px; text-align:center;
      color:var(--oro); padding:24px;
    }
    .hueco svg { width:40px; margin:0 auto; opacity:.6; }
    .hueco b { font-family:var(--texto); font-weight:400; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; }
    .hueco small { font-size:.7rem; color:var(--tinta-3); letter-spacing:.04em; }

    @media (min-width:860px) {
      #hero { padding-top:calc(env(safe-area-inset-top) + 130px); }
      #hero .rejilla { grid-template-columns:1.06fr .94fr; gap:60px; }
      #hero .marco { order:2; max-width:none; }
    }

    /* ═══════════════════════════════════════════════════════════
       SECCIONES · encabezado común
    ═══════════════════════════════════════════════════════════ */
    section { position:relative; padding:58px 0; }
    .enc { text-align:center; margin-bottom:34px; position:relative; z-index:1; }
    .enc h2 { font-size:clamp(1.85rem, 6.6vw, 2.75rem); margin-top:14px; text-transform:uppercase; letter-spacing:.02em; font-weight:600; }
    .enc h2 .script { display:block; font-size:1.12em; text-transform:none; letter-spacing:0; margin-top:-.04em; font-weight:400; }
    .enc p { color:var(--tinta-3); max-width:46ch; margin:14px auto 0; font-size:.94rem; }

    /* ═══════════════════════════════════════════════════════════
       CATEGORÍAS · las 4 de Claudia
    ═══════════════════════════════════════════════════════════ */
    #categorias { padding-top:14px; }
    .cuatro { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-block:1px solid rgba(192,139,62,.20); }
    .cuatro .c {
      display:flex; flex-direction:column; align-items:center; gap:9px;
      padding:22px 6px; cursor:pointer; background:transparent; border:none;
      border-left:1px solid rgba(192,139,62,.20);
      transition:background var(--t-base), color var(--t-base);
    }
    .cuatro .c:first-child { border-left:none; }
    .cuatro .c svg { width:27px; color:var(--oro); transition:transform var(--t-spring); }
    .cuatro .c b { font-family:var(--texto); font-weight:400; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); }
    .cuatro .c:hover { background:rgba(243,234,221,.55); }
    .cuatro .c:hover svg { transform:translateY(-3px) scale(1.06); }

    /* ═══════════════════════════════════════════════════════════
       SERVICIOS · filtro + lista con guía punteada
    ═══════════════════════════════════════════════════════════ */
    .filtros {
      display:flex; gap:8px; overflow-x:auto; padding:4px 22px 16px;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;
      margin-inline:-22px; scroll-snap-type:x proximity;
    }
    .filtros::-webkit-scrollbar { display:none; }
    .chip {
      flex:none; scroll-snap-align:center;
      background:var(--papel-alto); border:1px solid rgba(192,139,62,.24);
      border-radius:100px; padding:10px 19px; cursor:pointer;
      font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
      transition:all var(--t-base); white-space:nowrap;
    }
    .chip:hover { border-color:var(--oro); color:var(--oro); }
    .chip.on { background:var(--tinta); border-color:var(--tinta); color:var(--papel); }

    .lista { display:grid; gap:0; margin-top:8px; }
    @media (min-width:760px) { .lista { grid-template-columns:1fr 1fr; column-gap:52px; } }

    .item {
      display:flex; align-items:center; gap:14px; width:100%; text-align:left;
      padding:16px 2px; cursor:pointer; position:relative;
      /* es un <button>: sin esto el navegador le mete su propio fondo gris,
         su borde y el texto centrado. */
      background:transparent; border:none; font:inherit; color:inherit;
      border-bottom:1px dotted rgba(192,139,62,.42);
      transition:padding-left var(--t-base), background var(--t-base);
    }
    .item:hover { padding-left:8px; background:linear-gradient(90deg, rgba(243,234,221,.5), transparent); }
    .item .ico { width:34px; height:34px; flex:none; color:var(--oro); display:grid; place-items:center; }
    .item .ico svg { width:100%; height:100%; }
    .item .txt { flex:1; min-width:0; }
    .item .txt .n { display:block; font-family:var(--texto); font-weight:400; font-size:.92rem; color:var(--tinta); letter-spacing:.01em; line-height:1.3; }
    .item .txt .m { display:block; font-size:.7rem; color:var(--tinta-3); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
    .item .precio { font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--tinta); flex:none; }
    .item .flecha { width:15px; color:var(--arena); flex:none; transition:transform var(--t-base), color var(--t-base); }
    .item:hover .flecha { transform:translateX(4px); color:var(--oro); }

    /* estado de salida/entrada al filtrar */
    .item.oculto { display:none; }
    .item.entrando { animation:itemIn 300ms var(--t-base) both; }
    @keyframes itemIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

    .nota-pie {
      text-align:center; margin-top:26px; font-size:.78rem; color:var(--tinta-3);
      display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
    }
    .nota-pie svg { width:15px; color:var(--oro); }

    /* ═══════════════════════════════════════════════════════════
       CEREMONIAS · cotizador por pasos
    ═══════════════════════════════════════════════════════════ */
    #ceremonias { background:linear-gradient(180deg, transparent, rgba(243,234,221,.62) 14%, rgba(243,234,221,.62) 86%, transparent); }

    .cotiz { max-width:660px; margin:0 auto; }

    .barra-pasos { display:flex; align-items:center; gap:7px; margin-bottom:30px; }
    .barra-pasos .p { flex:1; height:2.5px; border-radius:3px; background:var(--arena-tenue); overflow:hidden; }
    .barra-pasos .p i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--oro-claro), var(--oro)); transition:width var(--t-suave); }
    .barra-pasos .p.hecho i, .barra-pasos .p.activo i { width:100%; }

    .paso { display:none; animation:pasoIn 340ms var(--t-base) both; }
    .paso.activo { display:block; }
    @keyframes pasoIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

    .paso .etiqueta { font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--oro); text-align:center; }
    .paso h3 { font-size:clamp(1.5rem,5.4vw,2rem); text-align:center; margin:10px 0 6px; }
    .paso h3 .script { display:block; font-size:1.1em; }
    .paso .ayuda { text-align:center; font-size:.82rem; color:var(--tinta-3); margin-bottom:26px; }

    .opciones { display:grid; gap:11px; }
    @media (min-width:620px) { .opciones.dos { grid-template-columns:1fr 1fr; } }

    .op {
      display:flex; align-items:center; gap:14px; text-align:left;
      background:var(--papel-alto); border:1px solid rgba(192,139,62,.22);
      border-radius:var(--r-md); padding:16px 18px; cursor:pointer;
      transition:all var(--t-base); position:relative;
    }
    .op:hover { border-color:var(--oro); transform:translateY(-2px); box-shadow:var(--sombra); }
    .op.on { border-color:var(--oro); background:linear-gradient(135deg,#fff,rgba(243,234,221,.8)); box-shadow:0 0 0 1px var(--oro) inset, var(--sombra); }
    .op .ico { width:30px; height:30px; color:var(--oro); flex:none; display:grid; place-items:center; }
    .op .cuerpo { flex:1; min-width:0; }
    .op .cuerpo .n { display:block; font-size:.9rem; color:var(--tinta); font-weight:400; line-height:1.3; }
    .op .cuerpo .d { display:block; font-size:.7rem; color:var(--tinta-3); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
    .op .val { font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--tinta); flex:none; }
    .op .tick {
      position:absolute; top:-7px; right:-7px; width:23px; height:23px; border-radius:50%;
      background:var(--oro); color:#fff; display:grid; place-items:center;
      opacity:0; transform:scale(.5); transition:all var(--t-spring);
    }
    .op .tick svg { width:12px; }
    .op.on .tick { opacity:1; transform:none; }

    .campo { margin-top:6px; }
    .campo label { display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); margin-bottom:8px; }
    .campo input, .campo textarea, .campo select {
      width:100%; background:var(--papel-alto);
      border:1px solid rgba(192,139,62,.24); border-radius:var(--r-sm);
      padding:14px 15px; font-size:.92rem; font-weight:300;
      transition:border-color var(--t-base), box-shadow var(--t-base);
    }
    .campo input:focus, .campo textarea:focus, .campo select:focus {
      outline:none; border-color:var(--oro); box-shadow:0 0 0 3px var(--oro-tenue);
    }
    .campo textarea { resize:vertical; min-height:88px; }
    .campo + .campo { margin-top:16px; }

    .nav-pasos { display:flex; gap:11px; margin-top:26px; }
    .nav-pasos .btn { flex:1; }

    /* resumen final */
    .resumen {
      background:var(--papel-alto); border:var(--borde); border-radius:var(--r-lg);
      padding:26px 24px; box-shadow:var(--sombra); position:relative; overflow:hidden;
    }
    .resumen::before {
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      background:linear-gradient(90deg, var(--oro-claro), var(--oro), var(--oro-claro));
    }
    .resumen .fila { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dotted rgba(192,139,62,.34); font-size:.88rem; }
    /* :last-of-type miraría el último <div> del resumen, que es .anticipo.
       Lo que queremos es la última fila, la que va justo antes del total —
       y esa cambia según haya notas o no. */
    .resumen .fila:has(+ .total) { border-bottom:none; }
    .resumen .fila .k { color:var(--tinta-3); letter-spacing:.08em; text-transform:uppercase; font-size:.68rem; padding-top:3px; }
    .resumen .fila .v { color:var(--tinta); text-align:right; font-weight:400; }
    .resumen .total { margin-top:14px; padding-top:16px; border-top:1px solid var(--arena); display:flex; justify-content:space-between; align-items:baseline; }
    .resumen .total .k { font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--oro); }
    .resumen .total .v { font-family:var(--display); font-weight:700; font-size:1.9rem; color:var(--tinta); }
    .resumen .anticipo {
      margin-top:14px; background:var(--calido); border-radius:var(--r-sm);
      padding:13px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px;
    }
    .resumen .anticipo .k { font-size:.72rem; color:var(--tinta-2); }
    .resumen .anticipo .v { font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--oro); }

    /* ═══════════════════════════════════════════════════════════
       SOBRE CLAUDIA
    ═══════════════════════════════════════════════════════════ */
    #sobre .rejilla { display:grid; gap:38px; align-items:center; }
    @media (min-width:860px) {
      #sobre .rejilla { grid-template-columns:.88fr 1.12fr; gap:58px; }
      #sobre .retrato { max-width:none; }
    }
    #sobre .retrato { border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; position:relative; width:100%; max-width:420px; margin-inline:auto; background:linear-gradient(160deg,var(--calido),var(--cuarzo)); box-shadow:var(--sombra-alta); }
    #sobre .retrato img { width:100%; height:100%; object-fit:cover; }
    #sobre h2 { text-align:left; }
    #sobre .cita { font-family:var(--serif); font-style:italic; font-size:1.22rem; color:var(--tinta-2); line-height:1.55; }
    #sobre p { margin-top:16px; font-size:.95rem; }
    #sobre .firma { font-family:var(--script); font-size:1.7rem; color:var(--oro); margin-top:20px; }

    /* ═══════════════════════════════════════════════════════════
       TESTIMONIOS
    ═══════════════════════════════════════════════════════════ */
    .carril { display:flex; gap:16px; overflow-x:auto; padding:6px 22px 20px; margin-inline:-22px; scroll-snap-type:x mandatory; scrollbar-width:none; }
    .carril::-webkit-scrollbar { display:none; }
    .testi {
      flex:none; width:min(80vw,340px); scroll-snap-align:center;
      background:var(--papel-alto); border:var(--borde); border-radius:var(--r-lg);
      padding:26px 24px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:13px;
    }
    .testi .comillas { font-family:var(--display); font-size:2.6rem; color:var(--arena); line-height:.6; }
    .testi p { font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--tinta-2); flex:1; line-height:1.5; }
    .testi .quien { display:flex; align-items:center; gap:11px; padding-top:11px; border-top:1px solid rgba(192,139,62,.18); }
    .testi .quien .ini { width:34px; height:34px; border-radius:50%; background:var(--calido); color:var(--oro); display:grid; place-items:center; font-size:.78rem; letter-spacing:.06em; flex:none; }
    .testi .quien .n { font-size:.82rem; color:var(--tinta); }
    .testi .quien .s { font-size:.66rem; color:var(--tinta-3); letter-spacing:.1em; text-transform:uppercase; }

    /* galería del estudio: mismo carril que los testimonios */
    .galeria .marco-foto {
      flex:none; width:min(72vw, 290px); aspect-ratio:4/5; scroll-snap-align:center;
      border-radius:var(--r-lg); overflow:hidden; border:var(--borde);
      box-shadow:var(--sombra); background:var(--calido);
    }
    .galeria .marco-foto img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-suave); }
    .galeria .marco-foto:hover img { transform:scale(1.04); }

    /* ═══════════════════════════════════════════════════════════
       CONTACTO
    ═══════════════════════════════════════════════════════════ */
    #contacto .tarjetas { display:grid; gap:12px; }
    @media (min-width:700px) { #contacto .tarjetas { grid-template-columns:repeat(3,1fr); } }
    .tcontacto {
      background:var(--papel-alto); border:var(--borde); border-radius:var(--r-lg);
      padding:24px 22px; text-align:center; box-shadow:var(--sombra);
      transition:transform var(--t-base), box-shadow var(--t-base);
    }
    .tcontacto:hover { transform:translateY(-3px); box-shadow:var(--sombra-alta); }
    .tcontacto .ico { width:42px; height:42px; margin:0 auto 13px; border-radius:50%; background:var(--calido); color:var(--oro); display:grid; place-items:center; }
    .tcontacto .ico svg { width:19px; }
    .tcontacto .k { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro); }
    .tcontacto .v { font-size:.94rem; color:var(--tinta); margin-top:7px; line-height:1.4; }

    .mapa { margin-top:16px; border-radius:var(--r-lg); overflow:hidden; border:var(--borde); box-shadow:var(--sombra); }
    .mapa iframe { width:100%; height:280px; border:0; display:block; filter:sepia(.16) saturate(.9); }

    /* ═══════════════════════════════════════════════════════════
       DOCK INFERIOR
    ═══════════════════════════════════════════════════════════ */
    #dock {
      position:fixed; left:50%; transform:translateX(-50%);
      bottom:calc(env(safe-area-inset-bottom) + 12px); z-index:80;
      width:min(94vw, 430px); height:var(--dock-h);
      background:rgba(251,248,243,.82);
      backdrop-filter:saturate(170%) blur(20px);
      -webkit-backdrop-filter:saturate(170%) blur(20px);
      border:1px solid rgba(192,139,62,.26); border-radius:100px;
      box-shadow:0 8px 34px rgba(59,35,23,.14);
      display:flex; align-items:center; justify-content:space-around; padding:0 8px;
      transition:transform var(--t-suave), opacity var(--t-base);
    }
    #dock.escondido { transform:translateX(-50%) translateY(140%); opacity:0; }
    #dock a {
      flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
      padding:9px 4px; border-radius:100px; color:var(--tinta-3);
      transition:color var(--t-base), background var(--t-base);
    }
    #dock a svg { width:20px; transition:transform var(--t-spring); }
    #dock a b { font-family:var(--texto); font-weight:400; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; }
    #dock a.on { color:var(--oro); background:rgba(192,139,62,.10); }
    #dock a.on svg { transform:translateY(-1px) scale(1.08); }

    /* ═══════════════════════════════════════════════════════════
       PIE
    ═══════════════════════════════════════════════════════════ */
    footer {
      background:var(--tinta); color:var(--calido); margin-top:34px;
      /* el hueco del dock vive aquí para que el café llegue hasta abajo */
      padding:52px 0 calc(var(--dock-h) + env(safe-area-inset-bottom) + 30px);
    }
    /* un <svg> es inline: sin display:block el margin auto no lo centra */
    footer .logo { display:block; width:62px; margin:0 auto 16px; color:var(--oro-claro); }
    footer .n { font-family:var(--display); font-size:1.14rem; letter-spacing:.18em; text-transform:uppercase; text-align:center; color:var(--papel); }
    footer .s { font-family:var(--texto); font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--oro-claro); text-align:center; margin-top:8px; }
    footer .lema { font-family:var(--script); font-size:1.5rem; color:var(--oro-claro); text-align:center; margin-top:20px; }
    footer .redes { display:flex; justify-content:center; gap:11px; margin-top:26px; }
    footer .redes a { width:42px; height:42px; border-radius:50%; border:1px solid rgba(224,184,114,.34); display:grid; place-items:center; color:var(--oro-claro); transition:all var(--t-base); }
    footer .redes a:hover { background:var(--oro); border-color:var(--oro); color:var(--tinta); }
    footer .redes a svg { width:18px; }
    footer .legal { text-align:center; margin-top:30px; padding-top:22px; border-top:1px solid rgba(224,184,114,.18); font-size:.7rem; color:rgba(243,234,221,.5); letter-spacing:.06em; }

    /* ═══════════════════════════════════════════════════════════
       MODAL de servicio
    ═══════════════════════════════════════════════════════════ */
    #modal { position:fixed; inset:0; z-index:110; display:grid; place-items:end center; opacity:0; visibility:hidden; transition:opacity var(--t-base), visibility var(--t-base); }
    #modal.abierto { opacity:1; visibility:visible; }
    #modal .fondo { position:absolute; inset:0; background:rgba(59,35,23,.42); backdrop-filter:blur(4px); }
    #modal .hoja {
      position:relative; z-index:1; width:min(100%, 480px);
      background:var(--papel); border:var(--borde); border-bottom:none;
      border-radius:var(--r-xl) var(--r-xl) 0 0;
      padding:14px 26px calc(env(safe-area-inset-bottom) + 30px);
      transform:translateY(100%); transition:transform var(--t-suave);
      max-height:88vh; overflow-y:auto; box-shadow:var(--sombra-alta);
    }
    #modal.abierto .hoja { transform:none; }
    #modal .agarre { width:42px; height:4px; border-radius:3px; background:var(--arena); margin:0 auto 20px; }
    #modal .cab { display:flex; align-items:center; gap:15px; }
    #modal .cab .ico { width:52px; height:52px; border-radius:50%; background:var(--calido); color:var(--oro); display:grid; place-items:center; flex:none; }
    #modal .cab .ico svg { width:26px; }
    #modal .cab h3 { font-size:1.34rem; line-height:1.2; }
    #modal .cab .m { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); margin-top:5px; }
    #modal .desc { margin-top:18px; font-size:.92rem; color:var(--tinta-2); }
    #modal .precio-caja {
      margin-top:20px; background:var(--papel-alto); border:var(--borde); border-radius:var(--r-md);
      padding:17px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px;
    }
    #modal .precio-caja .k { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); }
    #modal .precio-caja .v { font-family:var(--display); font-weight:700; font-size:1.7rem; color:var(--tinta); }
    #modal .precio-caja .ant { font-size:.7rem; color:var(--oro); margin-top:3px; }
    #modal .acciones { display:flex; flex-direction:column; gap:10px; margin-top:20px; }

    /* ═══════════════════════════════════════════════════════════
       PANTALLAS EXTREMAS
       Una sola página que se reacomoda; no dos sitios distintos.
    ═══════════════════════════════════════════════════════════ */

    /* ── Celular angosto (iPhone SE y similares, 320–379 px) ──
       "CLAUDIA GARCÍA" empujaba la hamburguesa fuera de la pantalla, y
       "CEREMONIAS" no cabía en una cuarta parte de 320 px. */
    @media (max-width:379px) {
      #cabecera .marca { gap:9px; }
      #cabecera .marca .logo { width:32px; }
      #cabecera .marca .txt .n { font-size:.75rem; letter-spacing:.09em; }
      #cabecera .marca .txt .s { font-size:.5rem; letter-spacing:.24em; }

      .cuatro { grid-template-columns:1fr 1fr; }
      .cuatro .c:nth-child(odd) { border-left:none; }
      .cuatro .c:nth-child(n+3) { border-top:1px solid rgba(192,139,62,.20); }
    }

    /* ── Escritorio (≥900 px) ──
       Se va el dock flotante y la hamburguesa; entran los enlaces al aire.
       --dock-h a 0 quita de paso el hueco que el pie le reservaba. */
    #cabecera nav.enlaces { display:none; }

    @media (min-width:900px) {
      :root { --dock-h: 0px; }
      #dock { display:none; }
      #cabecera .btn-menu { display:none; }

      #cabecera .fila { height:76px; }
      #cabecera nav.enlaces { display:flex; align-items:center; gap:30px; }
      #cabecera nav.enlaces a {
        position:relative; padding:6px 0;
        font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
        color:var(--tinta-2); transition:color var(--t-base);
      }
      #cabecera nav.enlaces a::after {
        content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
        background:var(--oro); transform:scaleX(0); transform-origin:left;
        transition:transform var(--t-base);
      }
      #cabecera nav.enlaces a:hover { color:var(--oro); }
      #cabecera nav.enlaces a:hover::after { transform:scaleX(1); }
      #cabecera nav.enlaces a.btn { padding:12px 24px; color:#fff; }
      #cabecera nav.enlaces a.btn::after { display:none; }

      /* con el hero completo a la vista, el carril se puede ver de un vistazo */
      .carril { padding-inline:0; margin-inline:0; }
      .filtros { justify-content:center; }
    }

    @media (min-width:620px) {
      #modal { place-items:center; }
      #modal .hoja { border-radius:var(--r-xl); border-bottom:var(--borde); padding-bottom:30px; transform:translateY(24px) scale(.97); }
      #modal.abierto .hoja { transform:none; }
      #modal .agarre { display:none; }
    }