/* ============================================================
   Bodas MX. Hoja base del sitio.
   Mobile primero. Sin dependencias externas: la CSP del sitio
   es default-src 'self', asi que aqui no se cargan fuentes ni
   recursos de terceros.
   Contiene los estilos de las paginas fundacionales y las
   clases del molde de articulo (respuesta corta, en corto,
   tabla, fuentes, faq, aviso editorial) para que la plantilla
   de articulo herede la misma piel.
   ============================================================ */

:root{
  --papel:#fbf9f6;
  --papel-2:#f4efe8;
  --tinta:#17130f;
  --apagado:#544d46;
  --linea:#e4ddd3;
  --tinto:#8a2433;
  --tinto-suave:#f6ecec;
  --verde:#2f5d4f;
  --foco:#8a2433;
  --sombra:0 1px 2px rgba(23,19,15,.05);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Palladio,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --ancho-texto:41rem;
  --ancho-ancho:70rem;
}

@media (prefers-color-scheme:dark){
  :root{
    --papel:#131110;
    --papel-2:#1c1917;
    --tinta:#f3eee7;
    --apagado:#b6ada3;
    --linea:#322d29;
    --tinto:#f0a9b1;
    --tinto-suave:#241a1c;
    --verde:#8fc3b1;
    --foco:#f0a9b1;
    --sombra:none;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tinto);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.01em;color:var(--tinta)}
h1{font-size:clamp(1.95rem,7.2vw,3.1rem);margin:0 0 .55rem}
h2{font-size:clamp(1.35rem,4.6vw,1.85rem);margin:2.6rem 0 .7rem}
h3{font-size:clamp(1.1rem,3.6vw,1.3rem);margin:2rem 0 .5rem}
p{margin:0 0 1.15rem}
ul,ol{padding-left:1.15rem}
li{margin:0 0 .5rem}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--linea);margin:2.6rem 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--papel-2);padding:.1em .35em;border-radius:3px}

/* ---------- utilidades ---------- */
.salta{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--papel);padding:.7rem 1rem;z-index:99}
.salta:focus{left:.6rem;top:.6rem}
.envoltura{width:100%;max-width:var(--ancho-ancho);margin:0 auto;padding:0 1.15rem}
.texto{width:100%;max-width:var(--ancho-texto);margin:0 auto;padding:0 1.15rem}
.kicker{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--tinto);margin:0 0 .7rem}
.sumario{font-size:1.12rem;line-height:1.62;color:var(--apagado);margin:0 0 1.4rem}
.chico{font-size:.88rem;color:var(--apagado)}
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- cabecera ---------- */
.aviso-propiedad{
  background:var(--papel-2);
  border-bottom:1px solid var(--linea);
  font-size:.78rem;
  line-height:1.5;
  color:var(--apagado);
  text-align:center;
  padding:.5rem 1rem;
  margin:0;
}
.aviso-propiedad a{color:inherit}
/* En telefono la cabecera NO es pegajosa: en una pantalla de 812 px
   robaba casi 140 px de lectura. A partir de tableta si se queda fija. */
.cabecera{border-bottom:1px solid var(--linea);background:var(--papel)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.15rem;max-width:var(--ancho-ancho);margin:0 auto}
.marca{font-family:var(--serif);font-size:1.4rem;font-weight:600;letter-spacing:-.015em;color:var(--tinta);text-decoration:none;white-space:nowrap}
.marca span{color:var(--tinto)}
.marca__pie{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--apagado);font-weight:600;margin-top:.1rem}
.menu{margin:0;padding:0 1.15rem .55rem;list-style:none;display:flex;gap:1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:var(--ancho-ancho);margin:0 auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{font-size:.86rem;font-weight:600;color:var(--apagado);text-decoration:none;white-space:nowrap;padding-bottom:.25rem;border-bottom:2px solid transparent}
.menu a:hover{color:var(--tinta)}
.menu a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--tinto)}

@media (min-width:800px){
  .cabecera{position:sticky;top:0;z-index:20}
  .cabecera__fila{padding:1rem 1.15rem}
  .menu{padding:0 1.15rem .8rem;gap:1.6rem;justify-content:flex-start}
  .menu a{font-size:.9rem}
}

/* ---------- portada ---------- */
.portada{padding:2.4rem 0 1.6rem;border-bottom:1px solid var(--linea)}
.portada h1{max-width:20ch}
.portada__lead{font-size:1.15rem;line-height:1.6;color:var(--apagado);max-width:52ch;margin:0 0 1.5rem}
.portada__datos{display:flex;flex-wrap:wrap;gap:.5rem .6rem;list-style:none;padding:0;margin:0}
.portada__datos li{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--apagado);border:1px solid var(--linea);border-radius:999px;padding:.28rem .7rem;margin:0}

/* ---------- buscador ---------- */
.buscador{padding:1.5rem 0 .2rem}
.buscador__caja{position:relative;max-width:34rem}
.buscador label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.02em;margin:0 0 .4rem;color:var(--tinta)}
.buscador input{
  width:100%;font:inherit;font-size:1rem;padding:.8rem .95rem;
  border:1px solid var(--linea);border-radius:6px;background:var(--papel);
  color:var(--tinta);box-shadow:var(--sombra);
}
.buscador input::placeholder{color:var(--apagado);opacity:.8}
.buscador__pista{font-size:.82rem;color:var(--apagado);margin:.5rem 0 0}

/* ---------- rejilla de temas ---------- */
.temas{padding:1.6rem 0 2.4rem}
.rejilla{display:grid;gap:.9rem;grid-template-columns:1fr;list-style:none;padding:0;margin:1.2rem 0 0}
@media (min-width:640px){.rejilla{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.rejilla{grid-template-columns:1fr 1fr 1fr}}
.tema{margin:0;border:1px solid var(--linea);border-radius:8px;background:var(--papel);padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column}
.tema[hidden]{display:none}
.tema__n{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--tinto);text-transform:uppercase;margin:0 0 .35rem}
.tema h3{margin:0 0 .45rem;font-size:1.2rem;line-height:1.25}
.tema h3 a{color:var(--tinta);text-decoration:none}
.tema h3 a:hover{color:var(--tinto);text-decoration:underline}
.tema p{font-size:.94rem;color:var(--apagado);margin:0 0 .8rem}
.tema ul{margin:0 0 .9rem;padding-left:1.05rem;font-size:.9rem}
.tema ul li{margin:0 0 .35rem;color:var(--apagado)}
.tema__ir{margin-top:auto;font-size:.85rem;font-weight:700;text-decoration:none;border-top:1px solid var(--linea);padding-top:.7rem}
.tema__ir::after{content:" \203A"}

.sin-resultados{border:1px dashed var(--linea);border-radius:8px;padding:1.1rem;color:var(--apagado);font-size:.95rem;margin:1.2rem 0 0}

/* ---------- franja de metodo ---------- */
.franja{background:var(--papel-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:2.2rem 0}
.franja h2{margin-top:0}
.franja__lista{display:grid;gap:1.2rem;grid-template-columns:1fr;list-style:none;padding:0;margin:1.2rem 0 0}
@media (min-width:760px){.franja__lista{grid-template-columns:repeat(3,1fr)}}
.franja__lista h3{margin:0 0 .3rem;font-size:1.05rem}
.franja__lista p{margin:0;font-size:.94rem;color:var(--apagado)}

/* ---------- prosa de pagina fija ---------- */
.pagina{padding:2rem 0 3rem}
.pagina .texto>h2:first-of-type{margin-top:1.6rem}
.pagina li{color:var(--tinta)}
.migas{font-size:.8rem;color:var(--apagado);padding:.9rem 0 0}
.migas a{color:var(--apagado)}
.migas span{padding:0 .35rem}
.migas+.kicker{margin-top:1.2rem}

.actualizado{font-size:.82rem;color:var(--apagado);border-bottom:1px solid var(--linea);padding-bottom:1rem;margin:0 0 1.6rem}

/* ---------- cajas del molde de articulo ---------- */
.respuesta-corta{
  border-left:3px solid var(--tinto);background:var(--tinto-suave);
  padding:1rem 1.1rem;border-radius:0 6px 6px 0;margin:0 0 1.6rem;
}
.respuesta-corta p{margin:0}
.respuesta-corta__rotulo{display:block;font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--tinto);margin:0 0 .35rem}

.en-corto{border:1px solid var(--linea);border-radius:8px;padding:1rem 1.1rem;margin:1.8rem 0}
.en-corto__rotulo{display:block;font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--tinto);margin:0 0 .5rem}
.en-corto ul{margin:0;padding-left:1.1rem}
.en-corto li{font-size:.95rem}

.aviso-editorial{
  font-size:.86rem;line-height:1.6;color:var(--apagado);
  background:var(--papel-2);border:1px solid var(--linea);border-radius:6px;
  padding:.75rem .9rem;margin:1.4rem 0;
}

.nota{border:1px solid var(--linea);border-left:3px solid var(--verde);border-radius:0 6px 6px 0;padding:.9rem 1rem;margin:1.6rem 0;background:var(--papel)}
.nota p:last-child{margin-bottom:0}
.nota strong{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verde);margin-bottom:.35rem}

.tabla-envoltura{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--linea);border-radius:8px;-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem;min-width:30rem}
.pista-tabla{font-size:.8rem;color:var(--apagado);margin:-1rem 0 1.8rem}
/* Arriba de 640 px la tabla ya cabe en la columna: la pista sobra. */
@media (min-width:640px){.pista-tabla{display:none}}
@media (min-width:900px){
  /* La tabla se sale de la columna de lectura para caber completa. */
  .texto .tabla-envoltura{width:min(54rem,92vw);margin-left:50%;transform:translateX(-50%)}
}
.tabla caption{text-align:left;font-size:.82rem;color:var(--apagado);padding:.7rem .8rem;border-bottom:1px solid var(--linea)}
.tabla th,.tabla td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla thead th{font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinto);background:var(--papel-2)}
.tabla tbody th{font-weight:650;color:var(--tinta)}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}

.fuentes{border-top:1px solid var(--linea);margin:2.6rem 0 0;padding-top:1.2rem}
.fuentes h2{margin-top:0;font-size:1.2rem}
.fuentes ol{font-size:.9rem;color:var(--apagado)}
.fuentes a{overflow-wrap:anywhere}

.faq h3{font-size:1.05rem;margin:1.6rem 0 .35rem}
.faq p{font-size:.97rem}

/* ---------- contacto ---------- */
.contacto-lista{list-style:none;padding:0;margin:1.4rem 0}
.contacto-lista li{border:1px solid var(--linea);border-radius:8px;padding:.95rem 1.05rem;margin:0 0 .7rem}
.contacto-lista h3{margin:0 0 .25rem;font-size:1.05rem}
.contacto-lista p{margin:0;font-size:.94rem;color:var(--apagado)}
.contacto-lista a{font-weight:600}

/* ---------- 404 ---------- */
.error{padding:3rem 0 2rem;text-align:left}
.error h1{font-size:clamp(1.9rem,7vw,2.8rem)}
.error__cod{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinto);margin:0 0 .6rem}

/* ---------- pie ---------- */
.pie{background:var(--papel-2);border-top:1px solid var(--linea);padding:2.2rem 0 2.6rem;margin-top:0}
.pie__cols{display:grid;gap:1.6rem;grid-template-columns:1fr;max-width:var(--ancho-ancho);margin:0 auto;padding:0 1.15rem}
@media (min-width:760px){.pie__cols{grid-template-columns:1.6fr 1fr 1fr}}
.pie h2{font-size:.72rem;font-family:var(--sans);font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--apagado);margin:0 0 .7rem}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin:0 0 .45rem}
.pie a{font-size:.92rem;text-decoration:none;color:var(--tinta)}
.pie a:hover{text-decoration:underline;color:var(--tinto)}
.pie__nota{font-size:.88rem;color:var(--apagado);margin:0;max-width:44ch}
.pie__abajo{max-width:var(--ancho-ancho);margin:1.8rem auto 0;padding:1.1rem 1.15rem 0;border-top:1px solid var(--linea);font-size:.8rem;color:var(--apagado);display:flex;flex-wrap:wrap;gap:.4rem .9rem}

@media print{
  .cabecera,.pie,.buscador{display:none}
  body{background:#fff;color:#000;font-size:12pt}
}