/* ============================================================
   VIENNA · joyería
   viennaperu.store

   IDENTIDAD
   El nombre da la raíz: Viena es la cuna de la Secesión Vienesa
   y los Wiener Werkstätte (1897–1932), el movimiento de Klimt y
   Josef Hoffmann, que además hacía joyería. De ahí salen las
   tres decisiones del sistema:

     · el cuadrado de Hoffmann como módulo que ordena la página
     · el oro de la época dorada de Klimt como único acento
     · la retícula geométrica en lugar del adorno

   Sobre la dirección "Vitrina Clara": fondo nácar, nunca negro.
   La sensación de escaparate la dan la urna blanca elevada, el
   filete de oro y el aire alrededor de cada pieza.
   ============================================================ */

:root{
  /* --- superficie --- */
  --nacar:#faf5ec;        /* fondo de la página */
  --nacar-2:#f3ebdd;      /* fondo hundido */
  --marfil:#ffffff;       /* la urna: tarjetas y fotos */

  /* --- oro --- */
  --oro:#a8792f;          /* acento: se lee sobre claro */
  --oro-cl:#d9b978;       /* brillos y degradados */
  --oro-luz:#f2e3c4;      /* bordes muy suaves */

  /* --- tinta --- */
  --tinta:#2a211a;        /* texto principal: espresso, no negro */
  --tinta-sv:#6d5c48;     /* texto secundario */
  --tinta-tn:#a08a70;     /* texto tenue */
  --linea:#e8dcc6;

  /* --- estado --- */
  --wa:#25d366;
  --malo:#a4514a;  --malo-bg:#fbeeec;
  --ok:#4f7a5b;    --ok-bg:#eef4ef;

  --urna:0 0 0 1px var(--linea), 0 1px 0 0 rgba(255,255,255,.9) inset,
         0 14px 30px rgba(88,62,28,.13);
  --urna-alta:0 0 0 1px var(--linea), 0 22px 46px rgba(88,62,28,.17);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:
    radial-gradient(820px 460px at 50% -14%, #fffdf7 0%, transparent 60%),
    linear-gradient(180deg,var(--nacar) 0%, #f7f0e3 100%);
  background-attachment:fixed;
  color:var(--tinta);
  font-family:"Jost","Segoe UI",system-ui,sans-serif;
  font-weight:300;font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--oro)}

/* ============================================================
   EL MÓDULO DE HOFFMANN
   Tres cuadrados. Aparece en el logotipo, como separador de
   sección y como marca de esquina. Es lo que hace que la página
   se lea como un sistema y no como una plantilla.
   ============================================================ */
.modulo{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.modulo i{width:5px;height:5px;background:var(--oro);display:block}
.modulo i:nth-child(2){background:var(--oro-cl)}
.modulo--sep{gap:4px}
.modulo--sep i{width:6px;height:6px}

/* ============================================================
   CINTA Y CABECERA
   ============================================================ */
.cinta{
  background:linear-gradient(100deg,#8f6522,#c9a253 46%,#8f6522);
  color:#fffaf0;text-align:center;padding:9px 16px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
}

.cab{
  background:rgba(250,245,236,.92);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:30;
}
.cab-in{max-width:1180px;margin:0 auto;padding:15px 22px;
  display:flex;align-items:center;gap:26px}

/* --- logotipo --- */
.cab-marca{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:var(--tinta);line-height:1;
}
.cab-marca .nombre{
  font-family:"Poiret One","Cormorant Garamond",Georgia,serif;
  font-size:1.9rem;letter-spacing:.3em;text-indent:.3em;font-weight:400;
}
.cab-marca .lema{
  font-size:8px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--oro);
}

.cab-nav{display:flex;gap:22px;flex:1;overflow-x:auto;scrollbar-width:none}
.cab-nav::-webkit-scrollbar{display:none}
.cab-nav a{
  color:var(--tinta-sv);text-decoration:none;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  white-space:nowrap;padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.cab-nav a:hover{color:var(--oro);border-color:var(--oro)}

.cab-wa{
  width:38px;height:38px;flex:none;border-radius:50%;
  border:1px solid var(--oro);color:var(--oro);
  display:grid;place-items:center;transition:background .2s,color .2s;
}
.cab-wa svg{width:19px;height:19px;fill:currentColor}
.cab-wa:hover{background:var(--oro);color:#fffaf0}

/* ============================================================
   PORTADA
   ============================================================ */
.portada-cab{
  position:relative;text-align:center;padding:64px 20px 44px;
  max-width:1180px;margin:0 auto;
}
.portada-cab::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:1px;height:40px;background:linear-gradient(var(--oro-cl),transparent);
}
.portada-cab .kicker{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--oro);margin-bottom:18px;
}
.portada-cab h1{
  font-family:"Poiret One",Georgia,serif;font-weight:400;
  font-size:clamp(2.5rem,6vw,4.2rem);line-height:1.08;
  margin:0 auto 16px;max-width:16ch;letter-spacing:.03em;
}
.portada-cab h1 span{
  background:linear-gradient(100deg,#8f6522,#d9b978 40%,#a8792f 62%,#e0c489);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.portada-cab p{color:var(--tinta-sv);max-width:46ch;margin:0 auto;font-size:1rem}

/* franja de garantías */
.garantias{
  max-width:1180px;margin:0 auto 42px;padding:0 20px;
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.garantia{
  flex:1;min-width:170px;text-align:center;padding:16px 12px;
  border-right:1px solid var(--linea);
}
.garantia:last-child{border-right:0}
.garantia b{
  display:block;font-family:"Poiret One",Georgia,serif;
  font-size:1.05rem;font-weight:400;color:var(--oro);
  letter-spacing:.08em;margin-bottom:2px;
}
.garantia span{font-size:.78rem;color:var(--tinta-tn);letter-spacing:.05em}

/* ============================================================
   BUSCADOR Y FILTROS
   ============================================================ */
.buscador{display:flex;gap:9px;max-width:520px;margin:0 auto 24px;padding:0 20px}
.buscador input{
  flex:1;padding:13px 16px;border:1px solid var(--linea);border-radius:2px;
  font-family:inherit;font-size:.98rem;font-weight:300;
  background:var(--marfil);color:var(--tinta);
}
.buscador input:focus{outline:none;border-color:var(--oro);
  box-shadow:0 0 0 3px var(--oro-luz)}
.buscador button{
  padding:13px 26px;border:0;border-radius:2px;
  background:linear-gradient(100deg,#a8792f,#d9b978 50%,#a8792f);
  color:#fffaf0;font-family:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
}
.buscador button:hover{filter:brightness(1.07)}

.chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 22px;padding:0 20px;max-width:1180px}
.chips a{
  padding:7px 15px;border:1px solid var(--linea);background:var(--marfil);
  color:var(--tinta-sv);text-decoration:none;font-size:.8rem;
  letter-spacing:.06em;white-space:nowrap;border-radius:2px;
  transition:border-color .18s,color .18s;
}
.chips a:hover{border-color:var(--oro);color:var(--oro)}
.chips a.on{background:var(--oro);color:#fffaf0;border-color:var(--oro)}

.cuenta-res{
  text-align:center;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-tn);margin-bottom:22px;
}
.sin-nada{text-align:center;padding:70px 20px;color:var(--tinta-tn)}

/* ============================================================
   REJILLA: LA VITRINA
   ============================================================ */
.ficha,.contenido{max-width:1180px;margin:0 auto;padding:0 20px 20px}

.rejilla-prod{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:22px;padding-bottom:50px;
}
.tarjeta-prod{
  display:flex;flex-direction:column;gap:0;
  text-decoration:none;color:inherit;
  transition:transform .2s ease;
}
.tarjeta-prod:hover{transform:translateY(-3px)}
.tarjeta-prod:focus-visible{outline:2px solid var(--oro);outline-offset:4px}

/* la urna */
.tarjeta-prod .foto{
  position:relative;border-radius:2px;overflow:hidden;
  background:var(--marfil);box-shadow:var(--urna);margin-bottom:13px;
  transition:box-shadow .2s ease;
}
.tarjeta-prod:hover .foto{box-shadow:var(--urna-alta)}
.tarjeta-prod .foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(158deg,rgba(255,255,255,.62),transparent 40%);
}
.tp-nombre{
  font-size:.87rem;line-height:1.4;color:var(--tinta);text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tp-precio{
  font-family:"Poiret One",Georgia,serif;font-size:1.3rem;
  color:var(--oro);letter-spacing:.05em;text-align:center;margin-top:5px;
}
.tp-agotado{
  display:block;font-style:normal;font-family:"Jost",sans-serif;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--malo);font-weight:500;margin-top:3px;
}

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.miga{
  display:flex;gap:8px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-tn);
  padding:26px 0 22px;flex-wrap:wrap;
}
.miga a{color:var(--tinta-sv);text-decoration:none}
.miga a:hover{color:var(--oro)}

.ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

.ficha-foto{position:relative}
.ficha-foto .foto{
  border-radius:3px;overflow:hidden;background:var(--marfil);
  box-shadow:var(--urna-alta);
}
.ficha-foto .foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.55),transparent 38%);
}
.sello-agotado{
  position:absolute;top:16px;left:16px;z-index:2;
  background:rgba(42,33,26,.9);color:#fffaf0;
  padding:6px 14px;border-radius:2px;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}

.ficha-datos{display:flex;flex-direction:column;padding-top:6px}
.ficha-cat{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.ficha-datos h1{
  font-family:"Poiret One",Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;
  margin:8px 0 16px;letter-spacing:.02em;
}
.ficha-precio{display:flex;align-items:baseline;gap:13px;margin-bottom:18px}
.ficha-precio .ahora{
  font-family:"Poiret One",Georgia,serif;font-size:2.5rem;
  color:var(--oro);line-height:1;letter-spacing:.03em;
}
.ficha-precio .antes{text-decoration:line-through;color:var(--tinta-tn);font-size:1.05rem}

.ficha-material{
  display:inline-block;align-self:flex-start;
  border:1px solid var(--linea);border-radius:2px;padding:5px 14px;
  font-size:.78rem;color:var(--tinta-sv);letter-spacing:.07em;margin-bottom:16px;
}
.ficha-desc{color:var(--tinta-sv);margin-bottom:24px;max-width:44ch;line-height:1.75}

.ficha-compra{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:11px}
.ficha-compra .cant{display:flex;flex-direction:column;gap:6px;flex:none}
.ficha-compra .cant span{font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-sv)}
.ficha-compra .cant input{
  width:86px;padding:15px 12px;border:1px solid var(--linea);border-radius:2px;
  font-family:inherit;font-size:1rem;text-align:center;background:var(--marfil);
}
.ficha-compra .cant input:focus{outline:none;border-color:var(--oro);
  box-shadow:0 0 0 3px var(--oro-luz)}

.btn-comprar{
  flex:1;min-width:240px;padding:17px 24px;border:0;border-radius:2px;
  background:linear-gradient(100deg,#a8792f,#d9b978 50%,#a8792f);
  color:#fffaf0;cursor:pointer;font-family:inherit;
  font-size:.86rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(168,121,47,.3);
  transition:filter .2s,transform .15s;
}
.btn-comprar:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-comprar:active{transform:translateY(1px)}
.btn-comprar:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

.agotado-aviso{
  background:var(--nacar-2);border:1px solid var(--linea);border-radius:2px;
  padding:16px 18px;color:var(--tinta-sv);font-size:.92rem;margin-bottom:11px;
}

.btn-wa-linea{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px;border-radius:2px;border:1px solid var(--wa);color:var(--wa);
  text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;transition:background .2s,color .2s;
}
.btn-wa-linea:hover{background:var(--wa);color:#fff}
.btn-wa-linea svg{width:19px;height:19px;fill:currentColor}

.ficha-garantias{
  list-style:none;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--linea);display:grid;gap:10px;
}
.ficha-garantias li{position:relative;padding-left:24px;font-size:.88rem;color:var(--tinta-sv)}
.ficha-garantias li::before{
  content:"";position:absolute;left:0;top:7px;
  width:8px;height:8px;background:var(--oro-cl);
}

/* ============================================================
   SECCIONES Y PIE
   ============================================================ */
.relacionados{margin-top:64px}
.relacionados h2,.seccion-tit{
  text-align:center;font-family:"Poiret One",Georgia,serif;
  font-weight:400;font-size:1.9rem;letter-spacing:.04em;margin-bottom:8px;
}
.relacionados::before{content:none}

.paginas{
  display:flex;gap:16px;align-items:center;justify-content:center;
  margin:34px 0 50px;font-size:.85rem;color:var(--tinta-sv);flex-wrap:wrap;
}
.paginas a{
  padding:10px 20px;border:1px solid var(--linea);border-radius:2px;
  background:var(--marfil);color:var(--tinta-sv);text-decoration:none;
  letter-spacing:.06em;
}
.paginas a:hover{background:var(--oro);color:#fffaf0;border-color:var(--oro)}

.pie{border-top:1px solid var(--linea);background:var(--nacar-2);margin-top:70px}
.pie-in{
  max-width:1180px;margin:0 auto;padding:42px 22px 30px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px;
}
.pie-col{display:flex;flex-direction:column;gap:7px}
.pie-col strong{
  font-family:"Poiret One",Georgia,serif;font-size:1.6rem;font-weight:400;
  letter-spacing:.24em;text-indent:.24em;
}
.pie-col p{color:var(--tinta-sv);font-size:.87rem}
.pie-tit{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);margin-bottom:3px}
.pie-col a{color:var(--tinta-sv);text-decoration:none;font-size:.87rem}
.pie-col a:hover{color:var(--oro)}
.pie-abajo{
  border-top:1px solid var(--linea);padding:16px 22px;text-align:center;
  font-size:.78rem;color:var(--tinta-tn);letter-spacing:.06em;
}

/* ============================================================
   MARCO DE FOTO
   Sin fotografía todavía: en lugar de un icono de imagen rota,
   la inicial de la pieza sobre la retícula de Hoffmann. Se lee
   como decisión, no como error.
   ============================================================ */
.foto{position:relative;overflow:hidden;background:var(--marfil)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}

.foto--sin{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;aspect-ratio:1;
  background-color:var(--marfil);
  background-image:
    linear-gradient(var(--nacar-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--nacar-2) 1px, transparent 1px);
  background-size:22px 22px;
}
.foto--sin .foto-inicial{
  font-family:"Poiret One",Georgia,serif;
  font-size:3rem;line-height:1;color:var(--oro);opacity:.75;letter-spacing:.06em;
}
.foto--sin .foto-cat{
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tinta-tn);text-align:center;padding:0 10px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.foto--card{aspect-ratio:1}
.foto--ficha{aspect-ratio:1}
.foto--ficha.foto--sin .foto-inicial{font-size:5rem}
.foto--mini{width:64px;height:64px;flex:none;aspect-ratio:1;border-radius:2px}
.foto--mini.foto--sin{gap:0;background-size:12px 12px}
.foto--mini.foto--sin .foto-inicial{font-size:1.5rem}
.foto--mini.foto--sin .foto-cat{display:none}

/* ============================================================
   PEDIDO: formulario y confirmación
   ============================================================ */
.envoltorio{max-width:620px;margin:0 auto;padding:30px 16px 70px}

.tarjeta{
  background:var(--marfil);border-radius:3px;padding:32px 30px;
  box-shadow:var(--urna-alta);
}
.tarjeta h1{
  font-family:"Poiret One",Georgia,serif;font-weight:400;
  font-size:2rem;line-height:1.14;letter-spacing:.03em;
}
.tarjeta .intro{color:var(--tinta-sv);margin-top:6px;font-size:.96rem}

.prod-mini{
  display:flex;align-items:center;gap:14px;
  background:var(--nacar);border:1px solid var(--linea);
  border-radius:2px;padding:12px 14px;margin:20px 0 24px;
}
.prod-mini > div{flex:1;min-width:0;display:flex;flex-direction:column}
.prod-mini strong{font-weight:400;font-size:.94rem;line-height:1.35}
.prod-mini span{font-size:.83rem;color:var(--tinta-tn)}
.prod-mini .mini-total{
  flex:none;font-family:"Poiret One",Georgia,serif;
  font-size:1.5rem;color:var(--oro);letter-spacing:.04em;
}

.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo label{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-sv);font-weight:500;
}
.campo label span{color:var(--oro)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border:1px solid var(--linea);border-radius:2px;
  font-family:inherit;font-size:.98rem;font-weight:300;
  background:var(--marfil);color:var(--tinta);
}
.campo textarea{resize:vertical;min-height:64px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--oro);box-shadow:0 0 0 3px var(--oro-luz);
}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{
  border-color:var(--malo);background:#fffbfa;
}
.campo em{font-style:normal;font-size:.84rem;color:var(--malo)}
.campo small{font-size:.82rem;color:var(--tinta-tn)}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo--cant input{max-width:110px}
.trampa{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

.error-general{
  background:var(--malo-bg);border:1px solid #e8c4c0;color:var(--malo);
  border-radius:2px;padding:12px 15px;margin:18px 0;font-size:.92rem;
}

.btn-enviar{
  width:100%;margin-top:8px;padding:17px;border:0;border-radius:2px;
  background:linear-gradient(100deg,#a8792f,#d9b978 50%,#a8792f);
  color:#fffaf0;cursor:pointer;font-family:inherit;font-size:.88rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(168,121,47,.3);
  transition:filter .2s;
}
.btn-enviar:hover{filter:brightness(1.07)}
.btn-enviar[disabled]{opacity:.6;cursor:progress}
.pista-pago{text-align:center;margin-top:11px;font-size:.83rem;color:var(--tinta-tn)}

.btn-wa{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;padding:17px;border-radius:2px;
  background:var(--wa);color:#fff;text-decoration:none;
  font-size:.88rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(37,211,102,.28);
  transition:transform .15s;
}
.btn-wa:hover{transform:translateY(-2px)}
.btn-wa svg{width:21px;height:21px;fill:currentColor;flex:none}
.pista-wa{text-align:center;margin-top:10px;font-size:.83rem;color:var(--tinta-tn)}

.volver{display:block;text-align:center;margin-top:26px;
  color:var(--tinta-sv);text-decoration:none;font-size:.88rem}
.volver:hover{color:var(--oro)}

/* confirmación */
.tarjeta--ok{text-align:center}
.tic{width:66px;height:66px;margin:0 auto 18px;border-radius:50%;
  background:var(--ok-bg);display:grid;place-items:center}
.tic svg{width:32px;height:32px;fill:none;stroke:var(--ok);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.tarjeta--ok .codigo{margin-top:6px;font-size:.94rem;color:var(--tinta-sv)}
.tarjeta--ok .codigo strong{font-family:ui-monospace,monospace;
  color:var(--tinta);letter-spacing:.05em}

.resumen{text-align:left;background:var(--nacar);border:1px solid var(--linea);
  border-radius:2px;padding:16px 18px;margin:22px 0 18px}
.resumen .linea{display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;font-size:.92rem}
.resumen .linea--total{border-top:1px solid var(--linea);margin-top:6px;
  padding-top:12px;font-weight:500}
.resumen .linea--total span:last-child{
  font-family:"Poiret One",Georgia,serif;font-size:1.5rem;
  color:var(--oro);line-height:1;letter-spacing:.04em}

.datos-envio{text-align:left;border:1px dashed var(--linea);border-radius:2px;
  padding:16px 18px;font-size:.9rem;color:var(--tinta-sv);line-height:1.75}
.datos-envio strong{color:var(--tinta);font-weight:500}
.datos-envio .ref{font-size:.85rem;color:var(--tinta-tn)}

/* modo de envío */
.modo-envio{border:0;padding:0;margin:0 0 16px;display:grid;
  grid-template-columns:1fr 1fr;gap:10px}
.modo-envio legend{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-sv);font-weight:500;padding:0;margin-bottom:9px;
  grid-column:1/-1;
}
.modo{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border:1px solid var(--linea);border-radius:2px;padding:14px;
  background:var(--marfil);transition:border-color .18s,background .18s;
}
.modo:hover{border-color:var(--oro)}
.modo:has(input:checked){border-color:var(--oro);background:#fffdf6}
.modo input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--oro)}
.modo span{display:flex;flex-direction:column;gap:2px;min-width:0}
.modo strong{font-weight:400;font-size:.9rem}
.modo small{font-size:.78rem;color:var(--tinta-tn);line-height:1.4}

.agencia-detalle{
  margin-top:10px;background:var(--nacar);border-left:2px solid var(--oro);
  padding:12px 14px;display:flex;flex-direction:column;gap:4px;
  font-size:.85rem;color:var(--tinta-sv);line-height:1.5;
}
.agencia-detalle strong{color:var(--oro);font-weight:500;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}

.aviso-envio{
  background:var(--ok-bg);border:1px solid #cbdfd0;color:var(--ok);
  border-radius:2px;padding:11px 14px;margin-bottom:16px;font-size:.87rem;
}

/* ============================================================
   PÁGINAS DE CONTENIDO
   ============================================================ */
.cleo-doc,.doc{max-width:820px;margin:0 auto;padding:38px 20px 60px}
.doc h1{font-family:"Poiret One",Georgia,serif;font-weight:400;
  font-size:2.4rem;letter-spacing:.03em;margin-bottom:8px}
.doc h2{font-family:"Poiret One",Georgia,serif;font-weight:400;
  font-size:1.5rem;margin:32px 0 10px;padding-top:20px;
  border-top:1px solid var(--linea);letter-spacing:.03em}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc p{margin:0 0 13px;color:var(--tinta-sv)}
.doc ul{margin:0 0 14px 20px;color:var(--tinta-sv)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .ficha-grid{grid-template-columns:1fr;gap:26px}
  .cab-in{padding:12px 16px;gap:16px}
  .cab-marca .nombre{font-size:1.5rem;letter-spacing:.22em;text-indent:.22em}
  .portada-cab{padding:44px 16px 34px}
}
@media (max-width:560px){
  .envoltorio{padding:18px 12px 50px}
  .tarjeta{padding:24px 19px}
  .fila-2,.modo-envio{grid-template-columns:1fr}
  .garantia{min-width:50%;border-bottom:1px solid var(--linea)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}