/* Páginas de contenido (empresas, bodas, solidario y guía): misma marca que la portada, pensadas para leerse */
:root { --r-l: 36px; --r-m: 22px; }
body { background: var(--paper); color: var(--ink); }
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.lectura { max-width: 860px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.cab { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.cab .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.cab .logo { text-decoration: none; --m: 21px; }
.cab .btn { min-height: 44px; padding: 0 16px; font-size: 15.5px; border-radius: 14px; white-space: nowrap; }
@media (max-width: 420px) { .cab .logo { --m: 17px; } .cab .btn { padding: 0 12px; font-size: 14px; } }

.portada { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.92), rgba(17,17,17,.6)); }
.portada .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; padding-block: clamp(36px, 7vw, 96px); }
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: #D4D4CF; }
.migas a { color: var(--lime); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.portada h1 { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 8vw, 112px); line-height: .9; letter-spacing: -0.05em; text-transform: lowercase; max-width: 11em; }
.portada h1 em { font-style: normal; color: var(--lime); }
.resumen { max-width: 38em; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: #EDEDE9; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.acciones .btn { min-height: 58px; border-radius: 18px; font-size: 18px; }
.btn.lima { background: var(--lime); color: var(--ink); }
.btn.claro { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
@media (max-width: 520px) { .acciones .btn { flex: 1 1 100%; } }

.cuerpo { padding-block: clamp(48px, 7vw, 96px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.bloque { display: flex; flex-direction: column; gap: 14px; }
.bloque h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.04em; }
.bloque p { font-size: 18px; line-height: 1.55; color: var(--soft); max-width: 40em; }
.bloque a { text-underline-offset: 3px; }
.puntos { display: flex; flex-direction: column; gap: 10px; }
.puntos li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.45; }
.puntos li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 5px; background: var(--orange); }
.puntos li:nth-child(4n+2)::before { background: var(--blue); }
.puntos li:nth-child(4n+3)::before { background: var(--lime); }
.puntos li:nth-child(4n+4)::before { background: var(--lilac); }
.puntos b { font-family: var(--display); }
.pasos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; counter-reset: paso; }
.pasos li { counter-increment: paso; border-radius: var(--r-m); padding: 20px; background: var(--mist); display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.4; color: var(--soft); }
.pasos li::before { content: counter(paso); width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; background: var(--orange); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 20px; }
.pasos li:nth-child(2)::before { background: var(--blue); } .pasos li:nth-child(3)::before { background: var(--lime); } .pasos li:nth-child(4)::before { background: var(--lilac); }
.pasos b { font-family: var(--display); font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.discos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.discos li { border-radius: 16px; padding: 14px 16px; background: var(--mist); font-size: 15px; color: var(--soft); }
.discos b { display: block; font-family: var(--display); font-size: 21px; letter-spacing: -0.03em; color: var(--ink); }

.preguntas details { border-top: 2px solid var(--ink); }
.preguntas details:last-child { border-bottom: 2px solid var(--ink); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-block: 16px; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2vw, 24px); line-height: 1.15; letter-spacing: -0.02em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--lime); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { padding-bottom: 18px; }

.llamada { border-radius: var(--r-l); padding: clamp(24px, 4vw, 48px); background: var(--lime); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.llamada h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 52px); line-height: .95; letter-spacing: -0.045em; text-transform: lowercase; }
.llamada p { flex: 1 1 100%; order: 2; font-size: 17px; color: #2A2A28; max-width: 36em; }
.llamada .btn { min-height: 58px; border-radius: 18px; font-size: 18px; }
.relacionadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.relacionadas a { display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-m); padding: 20px; background: var(--ink); color: var(--paper); text-decoration: none; transition: transform .15s ease; }
.relacionadas a:hover { transform: translateY(-3px) rotate(-.6deg); }
.relacionadas b { font-family: var(--display); font-size: 22px; letter-spacing: -0.03em; color: var(--lime); }
.relacionadas span { font-size: 15px; color: #D4D4CF; }

.pie { background: var(--ink); color: #D4D4CF; padding-block: 36px 28px; font-size: 14px; }
.pie .wrap { display: flex; flex-direction: column; gap: 20px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.pie nav a { color: var(--paper); text-decoration: none; }
.pie nav a:hover { text-decoration: underline; }
.pie .fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.pie img { height: 20px; }
@media (prefers-reduced-motion: reduce) { .relacionadas a { transition: none; } }

/* Aviso legal y privacidad */
.portada.legal::after { display: none; }
.portada.legal .wrap { padding-block: clamp(32px, 5vw, 64px); gap: 16px; }
.portada.legal h1 { font-size: clamp(40px, 6.4vw, 84px); }
.portada.legal .resumen { font-size: 16px; color: #D4D4CF; }
.indice { border-radius: var(--r-m); padding: 20px 24px; background: var(--mist); gap: 12px; }
.indice ol { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.indice a { color: var(--ink); text-underline-offset: 3px; }
.cuerpo .bloque[id] { scroll-margin-top: 84px; }
.pie .legales { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.pie .legales a { color: #D4D4CF; }
