/* La Carta Natal — hoja de estilo única.
   Paleta noche y oro; el claro queda donde hay que leer y confiar. */

:root {
  --noche: #0A1420;
  --noche-2: #08111C;
  --noche-3: #14283C;
  --oro: #C9A961;
  --oro-tinta: #A8802E;
  --crema: #F5F0E6;
  --crema-2: #EFE9DC;
  --papel: #FFFDF8;
  --tinta: #1A1814;
  --tinta-2: #5F594B;
  --tinta-3: #6E6656;
  --linea-crema: #E1D9C8;
  --borde-campo: #D5CBB4;
  --gris-noche: #A9B4C0;
  --gris-noche-2: #8B97A5;
  --marfil: #F4EEE1;
  --error: #8E3A24;

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texto: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ancho: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--oro-tinta); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; letter-spacing: -0.014em; }
h1 { font-size: clamp(2.6rem, 6vw, 5.1rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.07; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }

.env { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.oscuro { background: var(--noche); color: var(--marfil); }
.oscuro-2 { background: var(--noche-2); color: var(--marfil); }
.claro { background: var(--crema); color: var(--tinta); }
.seccion { padding: clamp(56px, 8vw, 104px) 0; }

.rotulo {
  display: block; font-size: 0.75rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--oro-tinta);
}
.oscuro .rotulo, .oscuro-2 .rotulo { color: var(--oro); }
.italica-oro { font-style: italic; color: var(--oro); }
.apagado { color: var(--tinta-2); }
.oscuro .apagado, .oscuro-2 .apagado { color: var(--gris-noche); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 2px;
  font-family: var(--texto); font-size: 0.92rem; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; cursor: pointer;
  transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn--oro { background: var(--oro); color: var(--noche); }
.btn--noche { background: var(--noche-3); color: #F0E3C2; width: 100%; }
.btn--linea {
  background: transparent; color: var(--oro); font-weight: 400;
  border: 1px solid rgba(201,169,97,0.5); text-transform: none;
  letter-spacing: 0.04em; min-height: 44px; padding: 0 20px; font-size: 0.9rem;
}
.btn--linea:hover { background: rgba(201,169,97,0.12); filter: none; }
.btn--texto {
  background: none; border: 0; color: var(--tinta-3); font-size: 0.9rem;
  text-transform: none; letter-spacing: 0; font-weight: 400; min-height: 44px;
  width: 100%; cursor: pointer;
}

/* ---------- cabecera ---------- */
.cabecera {
  position: relative; z-index: 3;
  border-bottom: 1px solid rgba(201,169,97,0.16);
}
.cabecera .env { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.marca { display: flex; align-items: center; gap: 11px; color: var(--marfil); }
.marca span { font-family: var(--display); font-size: 1.45rem; font-weight: 500; letter-spacing: 0.06em; }
.menu { display: flex; gap: 30px; font-size: 0.92rem; color: var(--gris-noche); }
.menu a { color: inherit; }
.menu a:hover { color: var(--marfil); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--noche); }
.hero__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,20,32,0.95) 0%, rgba(10,20,32,0.88) 38%, rgba(10,20,32,0.62) 72%, rgba(10,20,32,0.42) 100%);
}
.hero__pie { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, rgba(10,20,32,0), var(--noche)); }
.hero__rueda { position: absolute; right: -230px; top: 40px; width: 860px; height: 860px; opacity: 0.62; pointer-events: none; }
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 462px; gap: 76px; align-items: start;
  padding: clamp(48px, 7vw, 92px) 24px clamp(56px, 8vw, 104px);
}
.hero__texto { display: flex; flex-direction: column; gap: 26px; padding-top: 16px; color: var(--marfil); }
.hero h1 { max-width: 660px; }
.hero__bajada { font-size: clamp(1rem, 1.2vw, 1.13rem); line-height: 1.68; color: var(--gris-noche); max-width: 500px; }
.filete { display: flex; align-items: center; gap: 13px; }
.filete::before { content: ""; width: 46px; height: 1px; background: var(--oro); opacity: 0.7; }

.puntos { list-style: none; margin: 0; padding: 6px 0 0; display: flex; flex-direction: column; gap: 15px; }
.puntos li { display: flex; align-items: center; gap: 14px; font-size: 0.97rem; color: #C4CDD7; }
.puntos svg { flex-shrink: 0; }

.gira { animation: gira 300s linear infinite; transform-origin: 340px 340px; }
@keyframes gira { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .gira { animation: none; } }

/* ---------- formulario ---------- */
.tarjeta {
  background: var(--crema); color: var(--tinta); border-radius: 3px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,169,97,0.28);
  padding: 32px;
}
.paso__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.paso__titulo { font-family: var(--display); font-size: 1.85rem; font-weight: 400; }
.paso__cuenta { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }
.paso__bajada { font-size: 0.9rem; line-height: 1.55; color: var(--tinta-2); }
.barra { height: 2px; background: #DDD4C0; overflow: hidden; }
.barra__lleno { height: 2px; background: var(--oro-tinta); transition: width 0.3s ease; }

.campos { display: flex; flex-direction: column; gap: 17px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span, .campo > label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: #4A4438;
}
.campo input[type="text"], .campo input[type="date"], .campo input[type="time"], .campo input[type="email"] {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 2px;
  border: 1px solid var(--borde-campo); background: var(--papel);
  font-family: var(--texto); font-size: 1rem; color: var(--tinta);
}
.campo input::placeholder { color: #9E9788; }
.campo input:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 1px; }
.campo input[aria-invalid="true"] { border-color: #C08260; }
.campo input:disabled { background: var(--crema-2); color: var(--tinta-3); }
.ayuda { font-size: 0.79rem; line-height: 1.45; color: var(--tinta-3); text-transform: none; letter-spacing: 0; font-weight: 400; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.84rem; line-height: 1.5; color: var(--tinta-2); }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--oro-tinta); flex-shrink: 0; }
.check--caja { padding: 12px 13px; border: 1px solid #DDD4C0; border-radius: 2px; background: var(--crema-2); }

.aviso { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; background: var(--crema-2); border-left: 2px solid var(--oro-tinta); }
.aviso__titulo { display: flex; align-items: center; gap: 9px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: #4A4438; }
.aviso p { font-size: 0.81rem; line-height: 1.55; color: var(--tinta-2); }

.error { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; background: #F6E7E1; border-left: 2px solid #A8442A; font-size: 0.84rem; line-height: 1.45; color: var(--error); }
.error svg { flex-shrink: 0; margin-top: 2px; }

.bajo-boton { display: block; text-align: center; font-size: 0.79rem; color: var(--tinta-3); }
.oculto { display: none !important; }

.listo { display: flex; flex-direction: column; gap: 20px; padding: 8px 0 4px; }
.listo__resumen { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; background: var(--crema-2); border-left: 2px solid var(--oro-tinta); }
.listo__resumen dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinta-3); }
.listo__resumen dd { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--tinta); }

/* ---------- franja de signos ---------- */
.signos { border-top: 1px solid rgba(201,169,97,0.18); border-bottom: 1px solid rgba(201,169,97,0.18); }
.signos ul { list-style: none; margin: 0; padding: 34px 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.signos li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.signos b { font-family: var(--display); font-size: 1.15rem; font-weight: 500; color: #E4DCCB; }
.signos small { font-size: 0.7rem; color: var(--gris-noche-2); white-space: nowrap; }

/* ---------- bloques de contenido ---------- */
.encabezado { display: grid; grid-template-columns: 1fr 460px; gap: 80px; align-items: end; margin-bottom: 52px; }
.encabezado h2 { max-width: 620px; margin-top: 15px; }

.figura { position: relative; }
/* `height: auto` NO es decorativo: sin él la foto se aplasta en el celular.
   El <img> trae width="1200" height="592" en el HTML (bien: reservan el espacio y evitan
   el salto de layout al cargar). Pero con `width:100%` y sin `height:auto`, el ancho se
   achica al del teléfono y el ALTO se queda clavado en 592 px: una foto apaisada metida a
   la fuerza en una caja vertical. Medido el 03-sep-2026 sobre el sitio en vivo: en
   escritorio la deformación era del 4% y no se veía; en celular, del 68% — la rueda de la
   carta salía ovalada y los anteojos deformados. Lo encontró Pablo mirando una publicidad
   hecha con capturas del sitio. */
.figura img { width: 100%; height: auto; box-shadow: 0 30px 64px -34px rgba(26,24,20,0.6); }
.figura figcaption {
  position: absolute; left: 28px; bottom: 26px; padding: 9px 16px;
  background: rgba(10,20,32,0.82); color: #E4DCCB;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}

.numerados { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px; }
.numerados li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.numerados b { font-family: var(--display); font-size: 2.4rem; font-weight: 300; color: var(--oro); line-height: 1; }
.numerados p { margin-top: 8px; font-size: 0.97rem; line-height: 1.62; color: var(--tinta-2); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; align-items: center; }
.pila { display: flex; flex-direction: column; gap: 22px; }
.pila p { font-size: clamp(1rem, 1.1vw, 1.06rem); line-height: 1.7; max-width: 520px; }

.destacado { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-left: 2px solid var(--oro); background: rgba(201,169,97,0.07); }
.destacado b { font-weight: 400; font-size: 1rem; color: #F0E9DA; }
.claro .destacado { background: var(--crema-2); border-left-color: var(--oro-tinta); }
.claro .destacado b { color: var(--tinta); font-weight: 600; }

.astrolabio { display: flex; align-items: center; gap: 24px; }
.astrolabio img { width: 172px; height: 172px; object-fit: cover; border-radius: 50%; border: 1px solid rgba(201,169,97,0.3); flex-shrink: 0; }
.astrolabio p { font-size: 0.9rem; line-height: 1.7; color: var(--gris-noche-2); }

.metodo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.metodo article { display: flex; flex-direction: column; gap: 18px; padding: 40px 38px; background: var(--papel); border: 1px solid #E3DACA; }
.metodo p { font-size: 1rem; line-height: 1.68; color: var(--tinta-2); }
.metodo strong { font-weight: 600; color: var(--tinta); }

.limite { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 34px; padding: 34px 38px; border-left: 2px solid var(--oro-tinta); background: var(--crema-2); }
.limite p { font-size: 1rem; line-height: 1.68; color: #4A4438; }

/* ---------- testimonios ---------- */
.testimonios { position: relative; overflow: hidden; }
.testimonios__textura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; mix-blend-mode: luminosity; }
.testimonios__velo { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,17,28,0.72), rgba(8,17,28,0.9)); }
.testimonios .env { position: relative; z-index: 2; }
.testimonios__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.placeholder-aviso { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--oro); border: 1px dashed rgba(201,169,97,0.5); padding: 7px 13px; }
.testimonios ul { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.testimonios li { display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; border: 1px dashed rgba(201,169,97,0.32); }
.testimonios blockquote { margin: 0; font-family: var(--display); font-size: 1.28rem; line-height: 1.5; color: #E4DCCB; font-style: italic; }
.testimonios blockquote::before { content: "\201C"; display: block; font-size: 3.4rem; line-height: 0.6; color: var(--oro); opacity: 0.55; margin-bottom: 14px; }
.testimonios cite { font-style: normal; font-size: 0.88rem; color: #F0E9DA; }
.testimonios cite small { display: block; font-size: 0.81rem; color: var(--gris-noche-2); }

/* ---------- oferta ---------- */
.oferta { position: relative; display: grid; grid-template-columns: 1fr 372px; gap: 70px; padding: 62px 60px; background: var(--noche); color: var(--marfil); overflow: hidden; }
.oferta__rueda { position: absolute; right: -160px; top: -120px; width: 560px; height: 560px; opacity: 0.3; pointer-events: none; }
.oferta > div { position: relative; z-index: 2; }
.oferta ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 520px; }
.oferta li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.97rem; line-height: 1.5; color: #C4CDD7; }
.oferta li::before { content: "—"; color: var(--oro); }
.precio { display: flex; flex-direction: column; gap: 20px; padding: 34px 32px; background: rgba(245,240,230,0.06); border: 1px solid rgba(201,169,97,0.32); align-self: start; }
.precio__monto { font-family: var(--display); font-size: 3.1rem; font-weight: 300; line-height: 1; color: var(--marfil); }
.precio hr { width: 100%; height: 1px; border: 0; background: rgba(201,169,97,0.25); margin: 0; }

/* ---------- preguntas ---------- */
.preguntas { display: grid; grid-template-columns: 400px 1fr; gap: 80px; }
.preguntas dl { margin: 0; }
.preguntas dt { font-family: var(--display); font-size: 1.42rem; font-weight: 500; padding-top: 26px; }
.preguntas dd { margin: 10px 0 0; padding-bottom: 26px; border-bottom: 1px solid var(--linea-crema); font-size: 1rem; line-height: 1.65; color: var(--tinta-2); max-width: 740px; }

/* ---------- cierre ---------- */
.cierre { position: relative; overflow: hidden; text-align: center; }
.cierre__rueda { position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; margin: -360px 0 0 -360px; opacity: 0.22; pointer-events: none; }
.cierre .env { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cierre h2 { max-width: 780px; }
.cierre p { max-width: 540px; }

/* ---------- pie ---------- */
.pie { border-top: 1px solid rgba(201,169,97,0.16); padding: 56px 0 46px; }
.pie__filas { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; flex-wrap: wrap; }
.pie__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.pie__cols div { display: flex; flex-direction: column; gap: 12px; font-size: 0.92rem; color: var(--gris-noche); }
.pie__cols b { font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); font-weight: 400; }
.pie__cols a { color: inherit; }
.pie__cols a:hover { color: var(--marfil); }
.pie hr { border: 0; height: 1px; background: rgba(201,169,97,0.16); margin: 34px 0; }
.pie__legal { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; font-size: 0.79rem; line-height: 1.65; color: #77828F; }
.pie__legal p { max-width: 720px; }

.salto-contenido { position: absolute; left: -9999px; }
.salto-contenido:focus { left: 16px; top: 16px; z-index: 99; background: var(--oro); color: var(--noche); padding: 10px 16px; }

/* ================= TELÉFONO Y TABLET ================= */
@media (max-width: 1080px) {
  .hero__grid, .encabezado, .dos-columnas, .preguntas, .oferta { grid-template-columns: 1fr; gap: 44px; }
  .hero__rueda { right: -40%; top: auto; bottom: -10%; width: 640px; height: 640px; opacity: 0.4; }
  .numerados, .metodo, .testimonios ul, .limite, .oferta ul { grid-template-columns: 1fr; gap: 26px; }
  .signos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 10px; }
  .oferta { padding: 40px 28px; }
  .encabezado { margin-bottom: 34px; }
  .encabezado h2 { max-width: none; }
  .numerados { margin-top: 34px; }
  .limite { margin-top: 26px; padding: 24px 22px; }
  .astrolabio { flex-direction: column; align-items: flex-start; }
  .menu { display: none; }
}

@media (max-width: 620px) {
  .signos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metodo article { padding: 26px 22px; }
  .tarjeta { padding: 24px 22px; }
  .figura figcaption { left: 14px; bottom: 14px; padding: 7px 12px; font-size: 0.63rem; }
  .pie__cols { gap: 30px; }
  .btn { width: 100%; }
}

/* ---------- la espera mientras se arma la carta ---------- */
.progreso { font-size: 0.86rem; color: var(--oro-tinta); letter-spacing: 0.02em; min-height: 1.2em; }
.sol-gira { animation: sol 14s linear infinite; }
@keyframes sol { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sol-gira { animation: none; } }
.listo--error .sol-gira { animation: none; opacity: 0.4; }
/* terminó: el sol se queda quieto y la barra se va */
.listo--fin .sol-gira { animation: none; }
.listo--fin .barra { display: none; }

/* la barra que avisa que algo está pasando mientras se arma la carta */
.barra--anda { width: 30%; background: var(--oro-tinta); animation: recorre 2.4s ease-in-out infinite; }
@keyframes recorre { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .barra--anda { animation: none; width: 100%; } }
.listo--error .barra { display: none; }

/* lo ya cargado, visible al avanzar de paso: sin esto parece que se borró todo */
.cargado {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: 0.82rem; color: var(--tinta-3); padding-top: 2px;
}
.cargado b { font-weight: 500; color: var(--tinta); }
.cargado span { display: inline-flex; align-items: center; gap: 6px; }
.cargado span::before {
  content: ""; width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  background: var(--oro-tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
/* estilos de las páginas legales, se anexan a la hoja principal */

.doc { background: var(--crema); color: var(--tinta); min-height: 100vh; }
.doc .env { max-width: 760px; padding-top: 56px; padding-bottom: 80px; }
.doc h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 8px; }
.doc .fecha { display: block; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 40px; }
.doc h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; margin: 44px 0 14px; }
.doc p, .doc li { font-size: 1rem; line-height: 1.72; color: var(--tinta-2); }
.doc p { margin-bottom: 16px; }
.doc ul { margin: 0 0 16px; padding-left: 20px; }
.doc li { margin-bottom: 10px; }
.doc strong { font-weight: 600; color: var(--tinta); }
.doc .identidad, .aviso-borrador {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  background: var(--crema-2); border-left: 2px solid var(--oro-tinta); margin-bottom: 36px;
}
.doc .aviso-borrador b { font-weight: 600; color: var(--tinta); }
.doc .volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; font-size: 0.92rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 0.94rem; }
.doc th { text-align: left; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--oro-tinta); }
.doc td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--linea-crema); vertical-align: top; color: var(--tinta-2); }
.doc td:first-child { font-weight: 600; color: var(--tinta); width: 32%; }

/* el segundo botón de la entrega: la lámina */
.btn--linea-clara {
  background: transparent; color: var(--tinta-2); border: 1px solid var(--linea-crema);
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.9rem; min-height: 46px;
}
.btn--linea-clara:hover { background: var(--crema-2); filter: none; }

/* ---------- elegir la ciudad de una lista ---------- */
.campo--busca { position: relative; }
.sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 20;
  margin: 4px 0 0; padding: 4px; list-style: none; max-height: 232px; overflow-y: auto;
  background: var(--papel); border: 1px solid var(--borde-campo); border-radius: 2px;
  box-shadow: 0 14px 30px -14px rgba(26,24,20,0.35);
}
.sugerencias li {
  padding: 10px 12px; font-size: 0.92rem; color: var(--tinta); cursor: pointer;
  border-radius: 2px; line-height: 1.35;
}
.sugerencias li:hover, .sugerencias li[aria-selected="true"] { background: var(--crema-2); }
.sugerencias li small { display: block; font-size: 0.76rem; color: var(--tinta-3); margin-top: 2px; }
.sugerencias .vacio { color: var(--tinta-3); cursor: default; }
.sugerencias .vacio:hover { background: none; }
.elegido {
  display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--oro-tinta);
  font-weight: 500;
}
.elegido::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: var(--oro-tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* el desplegable de país, con la misma pinta que los campos de texto */
.campo select {
  width: 100%; height: 48px; padding: 0 12px; border-radius: 2px;
  border: 1px solid var(--borde-campo); background: var(--papel);
  font-family: var(--texto); font-size: 1rem; color: var(--tinta);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6656' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
}
.campo select:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 1px; }