/* ============================================================
   UNIVERSO DE LOS SUEÑOS — Hoja de estilos
   Estética: cielo de medianoche + marfil cálido. Serena y mística.
   Accesibilidad: letra grande, contraste alto, foco visible,
   objetivos táctiles de 48px, respeto a "reducir movimiento".
   ============================================================ */

:root {
    /* Paleta */
    --marfil:        #F8F5EF;   /* fondo del día */
    --papel:         #FFFDF8;   /* tarjetas */
    --tinta:         #2B2540;   /* texto principal (contraste 12:1 sobre marfil) */
    --tinta-suave:   #514A6B;
    --noche:         #262046;   /* cabecera y pie: cielo nocturno */
    --noche-2:       #1C1836;
    --indigo:        #4A3F78;   /* enlaces y botones */
    --indigo-oscuro: #38305E;
    --oro:           #8A6A20;   /* acento dorado sobre fondo claro (legible) */
    --oro-claro:     #D9BC77;   /* acento dorado sobre fondo oscuro */
    --linea:         #E3DCCB;

    /* Tipografía */
    --f-titulos: "Cormorant Garamond", Georgia, serif;
    --f-cuerpo:  "Atkinson Hyperlegible", Verdana, sans-serif;

    --radio: 16px;
    --sombra: 0 2px 14px rgba(38, 32, 70, .07);
    --sombra-alta: 0 14px 34px rgba(38, 32, 70, .16);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html {
    font-size: 118%;              /* base ≈ 19px: cómoda para personas mayores */
    scroll-behavior: smooth;
}
/* Tamaños controlados por la barra de accesibilidad (js/scripts.js) */
html.texto-mayor  { font-size: 136%; }
html.texto-gigante{ font-size: 155%; }
html.texto-menor  { font-size: 104%; }

body {
    margin: 0;
    font-family: var(--f-cuerpo);
    color: var(--tinta);
    background:
        radial-gradient(circle at 12% -5%, rgba(74, 63, 120, .06), transparent 40%),
        radial-gradient(circle at 92% 4%, rgba(217, 188, 119, .07), transparent 38%),
        var(--marfil);
    background-attachment: fixed;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: 1060px; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 {
    font-family: var(--f-titulos);
    color: var(--noche);
    line-height: 1.2;
    letter-spacing: .01em;
}
h1 { font-size: 2.6rem; font-weight: 600; margin: .4em 0 .4em; }
h2 { font-size: 1.9rem; font-weight: 600; margin: 1.2em 0 .5em; }
h3 { font-size: 1.35rem; margin: 1em 0 .4em; }

p { margin: 0 0 1em; max-width: 70ch; }

a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--indigo-oscuro); }

img { max-width: 100%; height: auto; }

/* Foco muy visible en todo el sitio (teclado) */
:focus-visible {
    outline: 3px solid var(--oro);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Solo para lectores de pantalla */
.solo-lectores {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Enlace para saltar al contenido */
.saltar {
    position: absolute; left: 1rem; top: -4rem;
    background: var(--oro-claro); color: var(--noche);
    padding: .7rem 1.2rem; border-radius: 0 0 10px 10px;
    font-weight: 700; z-index: 60; transition: top .2s;
}
.saltar:focus { top: 0; }

/* ---------- Barra superior: idiomas + accesibilidad ---------- */
.barra-superior {
    background: linear-gradient(180deg, #17132C 0%, var(--noche-2) 100%);
    color: #EDE7D6;
    border-bottom: 1px solid rgba(217, 188, 119, .18);
}
.barra-superior__interno {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .5rem 1rem;
    padding-top: .35rem; padding-bottom: .35rem;
}

/* Selector de idioma con banderitas */
.idiomas { display: flex; align-items: center; gap: .35rem; }
.idiomas__titulo { font-size: 1rem; opacity: .8; margin-right: .1rem; }
.idioma {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 34px; padding: .15rem .6rem;
    border: 1.5px solid transparent; border-radius: 999px;
    color: #D9D3EC; text-decoration: none;
    font: 700 .82rem var(--f-cuerpo); letter-spacing: .04em;
    transition: background .15s, border-color .15s, color .15s;
}
.idioma__bandera { font-size: 1.15rem; line-height: 1; }
.idioma:hover { background: rgba(217, 188, 119, .12); color: #FFF; }
.idioma--activo {
    background: rgba(217, 188, 119, .16);
    border-color: var(--oro-claro); color: var(--oro-claro);
}

/* ---------- Barra de accesibilidad ---------- */
.barra-acceso {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    justify-content: flex-end;
    font-size: .85rem;
}
.barra-acceso__titulo { margin-right: .15rem; color: var(--oro-claro); }
.barra-acceso button {
    min-width: 44px; min-height: 34px;
    background: transparent; color: #EDE7D6;
    border: 1.5px solid #5A5285; border-radius: 999px;
    font: 700 .9rem var(--f-cuerpo);
    cursor: pointer; padding: .1rem .7rem;
    transition: background .15s, border-color .15s, color .15s;
}
.barra-acceso button:hover { background: var(--indigo); border-color: var(--indigo); }
.barra-acceso button[aria-pressed="true"] { background: var(--oro-claro); color: var(--noche); border-color: var(--oro-claro); }

/* ---------- Cabecera: cielo nocturno ---------- */
.cabecera {
    background:
        radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 32% 70%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(2px 2px   at 58% 25%, rgba(233,215,165,.8) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 76% 60%, rgba(255,255,255,.55) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 90% 35%, rgba(255,255,255,.6) 50%, transparent 51%),
        linear-gradient(150deg, #322A5C 0%, var(--noche) 55%, var(--noche-2) 100%);
    color: #F3EFE2;
    border-bottom: 4px solid var(--oro-claro);
}
.cabecera__interno {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1.2rem;
    padding-top: 1.4rem; padding-bottom: 1.2rem;
}
.marca {
    display: flex; align-items: center; gap: .9rem;
    color: #F7F3E6; text-decoration: none;
}
.marca__luna { color: var(--oro-claro); display: grid; place-items: center; }
.marca__texto strong {
    display: block; font-family: var(--f-titulos);
    font-size: 1.8rem; font-weight: 700; letter-spacing: .02em;
}
.marca__texto small { color: #CFC7EA; font-size: .95rem; }

.buscador { display: flex; gap: .5rem; flex: 1 1 340px; max-width: 520px; }
.buscador input {
    flex: 1; min-height: 52px;
    font: 1rem var(--f-cuerpo); color: var(--tinta);
    padding: .5rem 1rem;
    border: 2px solid #6A619B; border-radius: 10px;
    background: #FFFDF8;
}
.buscador button {
    min-height: 52px; padding: 0 1.4rem;
    background: var(--oro-claro); color: var(--noche);
    border: 0; border-radius: 10px;
    font: 700 1.05rem var(--f-cuerpo); cursor: pointer;
}
.buscador button:hover { background: #E7CE93; }

/* Botón destacado "Envía tu sueño" en la cabecera */
.cta-enviar {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 52px; padding: 0 1.5rem;
    background: linear-gradient(180deg, #E7CE93 0%, var(--oro-claro) 100%);
    color: var(--noche); text-decoration: none;
    border-radius: 12px; font: 700 1.05rem var(--f-cuerpo);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta-enviar:hover {
    background: linear-gradient(180deg, #F0DBA6 0%, #E7CE93 100%);
    color: var(--noche); transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
}
.cta-enviar__icono { font-size: 1.25rem; line-height: 1; }

/* Enlace destacado del menú (versión móvil / listado) */
.menu__lista a.menu__destacado { color: var(--oro-claro); }
.menu__lista a.menu__destacado::before { content: "☾ "; }

/* ---------- Menú principal ---------- */
.menu { background: var(--noche-2); }
.menu__boton {
    display: none;
    margin: .5rem 0; min-height: 48px; width: 100%;
    background: var(--indigo); color: #fff;
    border: 0; border-radius: 10px;
    font: 700 1.1rem var(--f-cuerpo); cursor: pointer;
}
.menu__lista {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .25rem;
}
.menu__lista a {
    display: block; padding: .85rem 1.15rem;
    color: #EDE8DA; text-decoration: none;
    font-weight: 700; font-size: 1.02rem;
    border-bottom: 3px solid transparent;
}
.menu__lista a:hover,
.menu__lista a:focus-visible { color: var(--oro-claro); border-bottom-color: var(--oro-claro); }

/* ---------- Contenido ---------- */
main { padding-top: 2rem; padding-bottom: 3rem; }

.migas { font-size: .92rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.migas li + li::before { content: "›"; margin-right: .4rem; color: var(--oro); }

.intro { font-size: 1.12rem; color: var(--tinta-suave); }

.separador-luna {
    text-align: center; color: var(--oro);
    font-size: 1.4rem; letter-spacing: .8em; margin: 2.2rem 0;
    user-select: none;
}

/* Rejilla de tarjetas de sueños */
.rejilla {
    display: grid; gap: 1.2rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding: 0; list-style: none;
}
.tarjeta {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.5rem 1.5rem 1.3rem;
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarjeta::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    border-radius: var(--radio) var(--radio) 0 0;
    background: linear-gradient(90deg, var(--indigo), var(--oro-claro));
    opacity: 0; transition: opacity .18s ease;
}
.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-alta);
    border-color: transparent;
}
.tarjeta:hover::before { opacity: 1; }
.tarjeta h3 { margin-top: 0; }
.tarjeta h3 a { color: var(--noche); text-decoration: none; }
.tarjeta h3 a:hover { color: var(--indigo); text-decoration: underline; }
.tarjeta p { flex: 1; color: var(--tinta-suave); font-size: .98rem; }
.tarjeta__pie {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .9rem; color: var(--oro); margin-top: .6rem;
}
.tarjeta__enlace { font-weight: 700; }

/* Botones */
.boton, button.boton {
    display: inline-block;
    min-height: 52px; padding: .8rem 1.7rem;
    background: linear-gradient(180deg, #55488A 0%, var(--indigo) 100%);
    color: #fff;
    border: 0; border-radius: 12px;
    font: 700 1.05rem var(--f-cuerpo);
    text-decoration: none; cursor: pointer;
    box-shadow: 0 3px 10px rgba(56, 48, 94, .22);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.boton:hover {
    background: linear-gradient(180deg, var(--indigo) 0%, var(--indigo-oscuro) 100%);
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(56, 48, 94, .28);
}
.boton:active { transform: translateY(0); }
.boton--oro { background: linear-gradient(180deg, #E7CE93 0%, var(--oro-claro) 100%); color: var(--noche); box-shadow: 0 3px 10px rgba(138, 106, 32, .22); }
.boton--oro:hover { background: linear-gradient(180deg, var(--oro-claro) 0%, #CDA94E 100%); color: var(--noche); }
.boton--peligro { background: linear-gradient(180deg, #C0573A 0%, #9E3F28 100%); color: #fff; box-shadow: 0 3px 10px rgba(120, 40, 20, .22); }
.boton--peligro:hover { background: linear-gradient(180deg, #A3492F 0%, #7E2E1C 100%); color: #fff; }

/* ---------- Detalle del sueño: dos miradas ---------- */
.dos-miradas {
    display: grid; gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin: 1.5rem 0;
}
.mirada {
    background: var(--papel);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.7rem 1.8rem;
    border-top: 6px solid var(--indigo);
    transition: box-shadow .18s ease, transform .18s ease;
}
.mirada:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.mirada--religiosa { border-top-color: var(--oro); }
.mirada h2 { margin-top: 0; display: flex; align-items: center; gap: .6rem; }
.mirada__icono { color: var(--oro); font-size: 1.5rem; }

.meta-sueno { color: var(--tinta-suave); font-size: .95rem; }

/* Lista de relacionados y listados por letra */
.lista-suenos { list-style: none; padding: 0; display: grid; gap: .6rem; }
.lista-suenos a {
    display: block; background: var(--papel);
    border: 1px solid var(--linea); border-radius: 10px;
    padding: .9rem 1.2rem; text-decoration: none;
    color: var(--noche); font-weight: 700; font-size: 1.05rem;
}
.lista-suenos a:hover { border-color: var(--indigo); color: var(--indigo); }
.lista-suenos small { display: block; font-weight: 400; color: var(--tinta-suave); }

/* ---------- Paginación ---------- */
.pag {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin: 2rem 0 .5rem;
}
.pag__x {
    min-width: 46px; min-height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .4rem .85rem;
    border: 1.5px solid var(--linea); border-radius: 10px;
    background: var(--papel); color: var(--indigo);
    text-decoration: none; font-weight: 700; font-size: 1rem;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pag__x:hover { border-color: var(--indigo); background: #F3EFFA; color: var(--indigo-oscuro); }
.pag__x--actual { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.pag__x--actual:hover { color: #fff; }
.pag__x--off { opacity: .4; pointer-events: none; }
.pag__sep { color: var(--tinta-suave); padding: 0 .15rem; }
.pag__info { margin-left: auto; color: var(--tinta-suave); font-size: .92rem; }

html.alto-contraste .pag__x { background: #FFF; color: #0000B0; border-color: #000; }
html.alto-contraste .pag__x--actual { background: #000; color: #FFF; border-color: #000; }

/* ---------- Formularios ---------- */
.formulario {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.8rem;
    max-width: 46rem;
}
.formulario label { display: block; font-weight: 700; margin: 1rem 0 .3rem; }
.formulario .ayuda { font-size: .92rem; color: var(--tinta-suave); margin: 0 0 .4rem; }
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="search"],
.formulario textarea {
    width: 100%; min-height: 52px;
    font: 1.05rem var(--f-cuerpo); color: var(--tinta);
    padding: .7rem 1rem;
    border: 2px solid #B9AFD6; border-radius: 10px;
    background: #fff;
}
.formulario textarea { min-height: 10rem; resize: vertical; }
.formulario input:focus, .formulario textarea:focus {
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(74, 63, 120, .15);
    outline: none;
}

/* Captcha de suma (accesible, sin imágenes) */
.captcha__label { display: block; font-weight: 700; margin: 1.2rem 0 .3rem; }
.captcha__label strong {
    display: inline-block; margin-left: .4rem;
    font-family: var(--f-titulos); font-size: 1.35rem;
    color: var(--indigo-oscuro); letter-spacing: .08em;
}
.formulario input.captcha__campo {
    width: 6.5rem; text-align: center;
    font-size: 1.3rem; font-weight: 700; letter-spacing: .1em;
}

/* Campo trampa (honeypot): invisible para personas, tentador para robots */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mensaje {
    border-radius: 10px; padding: 1rem 1.3rem; margin: 1rem 0;
    font-size: 1.05rem;
}
.mensaje--ok   { background: #EAF3E4; border: 2px solid #4C7A3D; color: #2E4A24; }
.mensaje--error{ background: #F9E8E4; border: 2px solid #A3492F; color: #6E2E1C; }
.codigo-grande {
    font-size: 1.6rem; font-weight: 700; letter-spacing: .2em;
    background: #fff; border: 2px dashed var(--oro);
    display: inline-block; padding: .4rem 1rem; border-radius: 8px;
}

/* Consultas respondidas */
.consulta {
    background: var(--papel);
    border: 1px solid var(--linea); border-left: 6px solid var(--indigo);
    border-radius: var(--radio);
    padding: 1.3rem 1.5rem; margin-bottom: 1.2rem;
}
.consulta__pregunta { font-style: italic; color: var(--tinta-suave); }
.consulta__respuesta {
    background: #F4F0FA; border-radius: 10px;
    padding: 1rem 1.2rem; margin-top: .8rem;
}
.consulta__firma { color: var(--oro); font-weight: 700; font-size: .95rem; }

/* FAQ (details/summary accesible) */
.faq details {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: 10px; margin-bottom: .7rem; padding: 0;
}
.faq summary {
    cursor: pointer; font-weight: 700; font-size: 1.08rem;
    padding: 1rem 1.3rem; color: var(--noche);
}
.faq details[open] summary { border-bottom: 1px solid var(--linea); }
.faq .faq__cuerpo { padding: .9rem 1.3rem; }

/* ---------- Pie de página: firma del sitio ---------- */
.pie {
    background:
        radial-gradient(1.5px 1.5px at 18% 25%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 45% 65%, rgba(233,215,165,.6) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 72% 30%, rgba(255,255,255,.45) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 88% 70%, rgba(255,255,255,.5) 50%, transparent 51%),
        linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 100%);
    color: #E9E4D4;
    border-top: 4px solid var(--oro-claro);
    padding: 2.4rem 0 1.6rem;
    margin-top: 2rem;
}
.pie__titulo {
    font-family: var(--f-titulos); color: var(--oro-claro);
    font-size: 1.3rem; margin: 0 0 .7rem;
}
.pie a { color: #F0EBDC; }
.pie a:hover { color: var(--oro-claro); }

/* Constelación de letras (elemento distintivo del sitio) */
.abecedario {
    list-style: none; padding: 0; margin: 0 0 2rem;
    display: flex; flex-wrap: wrap; gap: .55rem;
}
.abecedario a {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border: 2px solid var(--oro-claro); border-radius: 50%;
    color: var(--oro-claro); text-decoration: none;
    font: 700 1.15rem var(--f-titulos);
    background: rgba(255, 253, 248, .04);
}
.abecedario a:hover,
.abecedario a:focus-visible {
    background: var(--oro-claro); color: var(--noche);
    transform: translateY(-2px);
}

/* Abecedario sobre fondo claro (página de letras) */
.abecedario--claro a { border-color: var(--oro); color: var(--oro); background: var(--papel); }
.abecedario--claro a:hover,
.abecedario--claro a:focus-visible,
.abecedario--claro a.actual { background: var(--oro-claro); color: var(--noche); border-color: var(--oro); }

.pie__columnas {
    display: grid; gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pie__enlaces { list-style: none; padding: 0; margin: 0; }
.pie__enlaces li { margin-bottom: .5rem; }
.pie__enlaces a { font-size: 1.02rem; }
.pie__idiomas { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.pie__idioma {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; border-radius: 999px;
    border: 1.5px solid rgba(240, 235, 220, .25);
    text-decoration: none; opacity: .85; font-size: .95rem;
}
.pie__idioma:hover { opacity: 1; border-color: var(--oro-claro); }
.pie__idioma.activo { opacity: 1; font-weight: 700; color: var(--noche); background: var(--oro-claro); border-color: var(--oro-claro); }
.pie__nota { font-size: .85rem; color: #BAB2D6; }
.pie__aviso {
    border-top: 1px solid #453D6E; margin-top: 2rem; padding-top: 1.2rem;
    font-size: .92rem; color: #C9C2E0; max-width: none;
}
.pie__derechos { font-size: .9rem; color: #A79FCB; }

/* ---------- Etiquetas por temas (enlazado interno) ---------- */
.temas { margin: 1.8rem 0; }
.temas__titulo { font-size: 1.15rem; margin: 0 0 .6rem; }
.temas__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tema-chip {
    display: inline-flex; align-items: center;
    padding: .38rem .9rem; border-radius: 999px;
    background: #F1ECF9; color: var(--indigo-oscuro);
    text-decoration: none; font-weight: 700; font-size: .95rem;
    border: 1.5px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.tema-chip:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: translateY(-1px); }
.etiqueta-almohadilla { color: var(--oro); }

/* ---------- Bloque de retención "Sigue explorando" ---------- */
.explora {
    background: linear-gradient(150deg, #F4F0FA 0%, #FBF6EC 100%);
    border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.5rem 1.6rem; margin: 1.8rem 0;
}
.explora__titulo { margin: 0 0 .6rem; font-size: 1.4rem; }
.explora__dato { color: var(--tinta); font-size: 1.05rem; margin: 0 0 1rem; max-width: none; }
.explora__dato strong { color: var(--oro); }
.explora__acciones { margin-bottom: 1.1rem; }

.compartir {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    border-top: 1px dashed var(--linea); padding-top: 1rem;
}
.compartir__txt { font-weight: 700; color: var(--tinta-suave); width: 100%; }
.compartir__botones { display: flex; flex-wrap: wrap; gap: .55rem; }
.compartir__b {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: .4rem 1rem;
    border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .92rem;
    color: #fff; border: 0; cursor: pointer; font-family: var(--f-cuerpo);
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.compartir__b svg { flex: 0 0 auto; }
.compartir__b:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.22); }
.compartir__b--wa { background: #1FA855; }
.compartir__b--x  { background: #17181A; }
.compartir__b--fb { background: #2E5AA8; }
.compartir__b--tg { background: #2AABEE; }
.compartir__b--copiar { background: var(--indigo); }
.compartir__b.copiado { background: #4C7A3D; }

/* "Quienes leyeron esto también vieron" */
.tambien { margin: 2rem 0 .5rem; }
.tambien h2 { margin-bottom: .8rem; }

/* ---------- E-E-A-T: byline, equipo y perfiles de autor ---------- */
.byline { font-size: .92rem; color: var(--tinta-suave); margin: -.3rem 0 0; }
.byline a { color: var(--indigo); }

.equipo { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.equipo--compacto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 1.2rem 0 1rem; }
.autor-card__enlace {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra); text-decoration: none; color: var(--noche);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.autor-card__enlace:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: transparent; }
.autor-card__avatar, .perfil__avatar {
    flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff;
    background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(0,0,0,.18)), var(--c, var(--indigo));
}
.autor-card__avatar { width: 58px; height: 58px; font-size: 1.7rem; }
.autor-card__texto { display: flex; flex-direction: column; min-width: 0; }
.autor-card__nombre { font-family: var(--f-titulos); font-size: 1.2rem; }
.autor-card__disc { color: var(--oro); font-weight: 700; font-size: .9rem; }
.autor-card__rol { color: var(--tinta-suave); font-size: .88rem; }

.perfil__cab {
    display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap;
    background: var(--papel); border: 1px solid var(--linea); border-left: 6px solid var(--c, var(--indigo));
    border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.6rem 1.7rem; margin-bottom: 1.4rem;
}
.perfil__avatar { width: 84px; height: 84px; font-size: 2.6rem; }
.perfil__nombre { margin: 0; }
.perfil__rol { color: var(--tinta-suave); font-weight: 700; margin: .25rem 0; }
.perfil__disc { color: var(--oro); }
.perfil__lema { font-style: italic; color: var(--indigo-oscuro); margin: .3rem 0 0; max-width: 60ch; }
.perfil__bio { max-width: 70ch; }
.perfil__bio p { margin-bottom: 1em; }
.perfil__areas { margin-top: 1.5rem; }
.areas-lista { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.areas-lista li { background: #F1ECF9; color: var(--indigo-oscuro); border-radius: 999px;
    padding: .4rem .95rem; font-weight: 700; font-size: .92rem; }

/* Consultorías presenciales */
.consultoria {
    margin: 2rem 0 .5rem; padding: 1.6rem 1.7rem;
    background: linear-gradient(150deg, #F4F0FA 0%, #FBF6EC 100%);
    border: 1px solid var(--linea); border-left: 6px solid var(--oro);
    border-radius: var(--radio); box-shadow: var(--sombra);
}
.consultoria h2 { margin-top: 0; }

html.alto-contraste .consultoria { background:#FFF; border-color:#000; }
html.alto-contraste .autor-card__enlace, html.alto-contraste .perfil__cab { background:#FFF; border-color:#000; }
html.alto-contraste .autor-card__avatar, html.alto-contraste .perfil__avatar { background:#000; color:#FFF; }
html.alto-contraste .areas-lista li { background:#FFF; color:#000; border:1px solid #000; }

/* ---------- Aviso de cookies: barra inferior fija (RGPD) ---------- */
.cookies {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--noche); color: #F3EFE2;
    border-top: 2px solid var(--oro-claro);
    box-shadow: 0 -8px 30px rgba(20, 16, 40, .4);
    animation: cookies-entra .4s ease both;
}
.cookies__in {
    max-width: 1060px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .8rem 1.4rem; padding: 1rem 1.3rem;
}
.cookies__txt { margin: 0; display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; flex: 1 1 340px; }
.cookies__txt strong { color: var(--oro-claro); }
.cookies__icono { font-size: 1.5rem; line-height: 1; }
.cookies__acc { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookies__acc .boton { min-height: 44px; padding: .5rem 1.3rem; }
.cookies--fuera { transform: translateY(120%); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
@keyframes cookies-entra { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 620px){ .cookies__acc { width: 100%; } .cookies__acc .boton { flex: 1; } }

/* Botón fantasma (secundario, también usado en el aviso de cookies) */
.boton--fantasma { background: rgba(255,255,255,.1); color: #F3EFE2; box-shadow: none; border: 1.5px solid rgba(217,188,119,.5); }
.boton--fantasma:hover { background: rgba(255,255,255,.18); color: #fff; }

.cookies__mas { color: var(--oro-claro); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.cookies__mas:hover { color: #fff; }
html.alto-contraste .cookies { background: #000; color: #FFF; border-color: #FFF; }
html.alto-contraste .cookies__txt strong, html.alto-contraste .cookies__mas { color: #FFF; }

/* Páginas de documento (privacidad, avisos) */
.documento { max-width: 760px; }
.documento h2 { margin-top: 1.7rem; }
.lista-puntos { padding-left: 1.2rem; margin: .4rem 0 1rem; }
.lista-puntos li { margin-bottom: .55rem; max-width: 70ch; }
.lista-puntos code, .documento code {
    background: #F1ECF9; color: var(--indigo-oscuro);
    padding: .1rem .45rem; border-radius: 6px; font-size: .92em;
}
html.alto-contraste .lista-puntos code, html.alto-contraste .documento code { background:#FFF; color:#000; border:1px solid #000; }

html.alto-contraste .tema-chip { background:#FFF; color:#0000B0; border-color:#000; }
html.alto-contraste .explora { background:#FFF; border-color:#000; box-shadow:none; }
html.alto-contraste .explora__dato, html.alto-contraste .explora__dato strong { color:#000; }
html.alto-contraste .compartir__b { background:#000; color:#FFF; border:2px solid #000; }

/* ---------- Modo de alto contraste ---------- */
html.alto-contraste body { background: #FFFFFF; color: #000; }
html.alto-contraste .tarjeta,
html.alto-contraste .mirada,
html.alto-contraste .formulario,
html.alto-contraste .consulta,
html.alto-contraste .faq details { background: #FFF; border-color: #000; box-shadow: none; }
html.alto-contraste h1, html.alto-contraste h2, html.alto-contraste h3 { color: #000; }
html.alto-contraste p, html.alto-contraste .intro,
html.alto-contraste .tarjeta p, html.alto-contraste .meta-sueno { color: #000; }
html.alto-contraste a { color: #0000B0; }
html.alto-contraste .cabecera, html.alto-contraste .pie,
html.alto-contraste .menu, html.alto-contraste .barra-superior,
html.alto-contraste .barra-acceso { background: #000; color: #FFF; }
html.alto-contraste .menu__lista a, html.alto-contraste .pie a,
html.alto-contraste .idioma { color: #FFF; }
html.alto-contraste .idioma--activo, html.alto-contraste .pie__idioma.activo { background: #FFF; color: #000; border-color: #FFF; }
html.alto-contraste .abecedario a { border-color: #FFF; color: #FFF; }
html.alto-contraste .boton { background: #000; color: #FFF; border: 2px solid #000; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 720px) {
    h1 { font-size: 2.1rem; }
    .menu__boton { display: block; }
    .menu__lista { display: none; flex-direction: column; padding-bottom: .6rem; }
    .menu__lista.abierto { display: flex; }
    .menu__lista a { border-left: 3px solid transparent; border-bottom: 0; }
    .menu__lista a:hover { border-left-color: var(--oro-claro); }
    .cabecera__interno { flex-direction: column; align-items: stretch; }
    .buscador { max-width: none; }
    .cta-enviar { justify-content: center; }
}

@media print {
    .barra-superior, .barra-acceso, .menu, .buscador, .pie__abecedario, .formulario, .pag { display: none; }
    body { background: #fff; }
}