/* Páginas interiores de luissalvo.com (guía de precios y textos legales).
   Mismo diseño que la portada «Cercana»: papel claro, tinta, naranja solo para lo importante,
   Archivo para leer y Martian Mono para las etiquetas.
   Si cambias este archivo, sube el número de ?v= en los enlaces de las páginas para que se vea al momento. */

@font-face {
    font-family: 'Archivo';
    src: url('/fonts/archivo-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Martian Mono';
    src: url('/fonts/martian-mono-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-stretch: 75% 112.5%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo Reserva';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
}

:root {
    --ink: #121211;
    --ink-2: #1B1B19;
    --ink-3: #282825;
    --bone: #EEEAE2;
    --bone-2: #CFC9BD;
    --paper: #F3EFE7;
    --paper-2: #EAE4D8;
    --mute: #948E83;
    --mute-l: #5B564E;
    --orange: #FF5A1F;
    --orange-t: #B03A0C;
    --line-d: rgba(238, 234, 226, .13);
    --line-l: rgba(18, 18, 17, .14);
    --sans: 'Archivo', 'Archivo Reserva', Arial, sans-serif;
    --mono: 'Martian Mono', ui-monospace, Menlo, Consolas, monospace;
    --nav-h: 76px;
    --gut: clamp(20px, 5vw, 64px);
    --gris: #57524A;
    --wa: #1DAA61;
    --r: 6px;
    --ease: cubic-bezier(.2, .7, .1, 1);
    --cel: 88px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--nav-h) + 24px);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.7 var(--sans);
    font-stretch: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
p,
ol,
ul,
address {
    margin: 0;
}

::selection {
    background: var(--orange);
    color: var(--ink);
}

/* Foco visible con 3:1 sobre cada fondo (WCAG 2.2) */
:focus-visible {
    outline: 2px solid var(--orange-t);
    outline-offset: 3px;
}

.pie :focus-visible,
.cta-box :focus-visible,
.lado-cta :focus-visible,
.stats :focus-visible {
    outline-color: var(--orange);
}

.saltar {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 200;
    background: var(--orange);
    color: var(--ink);
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
}

.saltar:focus {
    top: 12px;
}

.wrap {
    width: min(100% - 2 * var(--gut), 1200px);
    margin-inline: auto;
}

.mono {
    font-family: var(--mono);
    font-size: .72rem;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-stretch: 87.5%;
    font-weight: 400;
}

/* ===== BOTÓN (el de la portada) ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 22px;
    border: 2px solid var(--orange);
    border-radius: var(--r);
    background: var(--orange);
    color: var(--ink);
    font: 700 1.02rem/1.2 var(--sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s var(--ease);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn svg {
    width: 22px;
    height: 22px;
    flex: none;
}

.btn .fl {
    display: inline-block;
}

/* ===== CABECERA (la de la portada) ===== */
.cab {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(243, 239, 231, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-l);
}

.cab .wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--nav-h);
}

/* Logo: archivo del sistema de marca (versión para fondo claro). Se usa tal cual: no se recolorea ni se estira. */
.logo {
    display: inline-flex;
    margin-right: auto;
}

.logo img {
    display: block;
    width: auto;
    height: 28px;
}

.menu {
    display: flex;
    gap: 28px;
}

.menu a {
    padding-block: 10px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    background: linear-gradient(var(--orange), var(--orange)) 0 90% / 0 3px no-repeat;
    transition: background-size .3s var(--ease);
}

.menu a:hover,
.menu a[aria-current] {
    background-size: 100% 3px;
}

.cab .btn {
    min-height: 46px;
    padding: 8px 18px;
    font-size: .98rem;
}

/* ===== CABECERA DEL ARTÍCULO (blanca, como las secciones claras de la portada) ===== */
.art-cab {
    position: relative;
    background: #FFFFFF;
    color: var(--ink);
    padding: clamp(40px, 8vh, 88px) 0 clamp(36px, 6vh, 64px);
    border-bottom: 1px solid var(--line-l);
}

.art-cab>.wrap {
    position: relative;
    z-index: 1;
}

/* ===== REJILLA DE LAS PÁGINAS INTERIORES =====
   Mismo ancho que el menú y el pie, con dos columnas que llegan a los dos bordes:
   a la izquierda, migas, índice y ficha; a la derecha, el título y el texto. */
.doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 760px);
    column-gap: clamp(40px, 6vw, 120px);
}

.art-cab .doc {
    align-items: end;
}

.art-cab .doc-lado .etq {
    margin-bottom: 4px;
}

.doc-cuerpo {
    padding: clamp(40px, 7vh, 72px) 0 clamp(72px, 12vh, 120px);
}

.doc-cuerpo>.doc-lado {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
    align-self: start;
}

/* Ficha del texto legal, como el cajetín de un plano */
.ficha {
    border: 1.5px solid var(--ink);
    background: #FBF9F4;
}

.ficha p {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-l);
    font-size: .95rem;
    line-height: 1.45;
}

.ficha p:last-child {
    border-bottom: 0;
}

.ficha span {
    display: block;
    margin-bottom: 2px;
    font: 500 .66rem/1.5 var(--mono);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--mute-l);
}

.ficha a {
    color: var(--ink);
    text-decoration-color: var(--orange-t);
    text-underline-offset: 3px;
}

.ficha-docs {
    padding: 12px 16px 14px;
}

.ficha-docs ul {
    display: grid;
    gap: 4px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: .95rem;
}

.ficha-docs a[aria-current] {
    color: var(--orange-t);
    font-weight: 700;
    text-decoration: none;
}

/* Aviso pequeño del lateral: pedir la web */
.lado-cta {
    margin-top: 18px;
    padding: 18px 18px 20px;
    background: var(--ink);
    color: var(--bone-2);
    font-size: .95rem;
    line-height: 1.5;
}

.lado-cta strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bone);
    font-size: 1.15rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -.01em;
}

.lado-cta .btn {
    margin-top: 14px;
    width: 100%;
    justify-content: center;
}

.migas ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
    color: var(--gris);
}

.migas li+li::before {
    content: "/";
    margin-right: 8px;
    color: var(--orange-t);
}

.migas a {
    color: var(--ink);
    text-decoration: none;
}

.migas a:hover {
    text-decoration: underline;
    text-decoration-color: var(--orange);
}

/* Etiqueta con el cuadrado naranja del logo, como en la portada */
.etq {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 18px;
    font-size: .8rem;
    color: var(--gris);
}

.etq::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--orange);
    flex: none;
}

.etq b {
    color: var(--orange-t);
    font-weight: 600;
}

.art-cab h1 {
    font-weight: 800;
    font-size: clamp(2.3rem, 5.6vw, 4.4rem);
    line-height: .95;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.art-cab h1 em {
    display: block;
    font-style: normal;
    color: var(--orange-t);
    margin-top: .08em;
}

.legal-cab h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
}

.byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--line-l);
    color: var(--gris);
}

.byline img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}

.byline strong {
    color: var(--ink);
    font-weight: 700;
}

/* ===== TEXTO ===== */
.prose {
    min-width: 0;
}

.prose>:first-child {
    margin-top: 0;
}

.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--orange-t);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color .2s;
}

.prose a:hover {
    color: var(--orange-t);
}

.prose h2 {
    font-weight: 800;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: clamp(56px, 9vh, 88px) 0 18px;
    padding-top: 18px;
    border-top: 1.5px solid var(--ink);
}

/* En la guía, cada apartado lleva su número, como los planos */
.guia {
    counter-reset: apartado;
}

.guia>h2 {
    counter-increment: apartado;
}

.guia>h2::before {
    content: counter(apartado, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    font: 500 .72rem/1 var(--mono);
    letter-spacing: .02em;
    color: var(--orange-t);
}

.prose h3 {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 34px 0 10px;
}

.prose p,
.prose ul,
.prose ol {
    margin-bottom: 18px;
}

.prose p {
    text-wrap: pretty;
}

.prose ul,
.prose ol {
    padding-left: 22px;
}

.prose li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.prose li::marker {
    color: var(--orange-t);
    font-weight: 700;
}

.prose strong {
    font-weight: 700;
}

.num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.small {
    font-size: .9rem;
    color: var(--mute-l);
}

/* Respuesta rápida */
.answer {
    position: relative;
    padding: 26px 28px;
    margin-bottom: 28px;
    background: #FBF9F4;
    border: 1.5px solid var(--ink);
    border-left: 6px solid var(--orange);
    font-size: 1.1rem;
    line-height: 1.6;
}

.answer-label {
    display: block;
    margin-bottom: 8px;
    font: 500 .72rem/1.5 var(--mono);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--orange-t);
}

/* Cifras clave */
.prose .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
    background: var(--line-d);
    border: 1px solid var(--ink);
}

.stats li {
    margin: 0;
    padding: 22px 22px 20px;
    background: var(--ink);
    color: var(--bone-2);
    font-size: .95rem;
    line-height: 1.45;
}

.stats strong {
    display: block;
    margin-bottom: 6px;
    color: var(--bone);
    font-weight: 800;
    font-stretch: 112%;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    letter-spacing: -.02em;
    line-height: 1.05;
}

.stats li:first-child strong {
    color: var(--orange);
}

/* Índice (en el lateral) */
.toc {
    margin: 0;
    padding: 20px 22px 12px;
    border: 1.5px solid var(--ink);
    background: #FBF9F4;
}

.toc p {
    margin-bottom: 12px;
    font: 500 .72rem/1.5 var(--mono);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--mute-l);
}

.toc ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: toc;
}

.toc li {
    margin-bottom: 8px;
    padding-left: 0;
    break-inside: avoid;
    font-size: .98rem;
    counter-increment: toc;
    display: flex;
    gap: 10px;
}

.toc li::before {
    content: counter(toc, decimal-leading-zero);
    font: 500 .7rem/1.9 var(--mono);
    color: var(--orange-t);
    flex: none;
}

.toc a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(176, 58, 12, .45);
    text-underline-offset: 3px;
}

.toc a:hover {
    color: var(--orange-t);
}

/* Tablas */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 22px 0 12px;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
}

.prose table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: .96rem;
    line-height: 1.5;
}

.prose th,
.prose td {
    padding: 14px 14px 14px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-l);
}

.prose thead th {
    font: 500 .68rem/1.5 var(--mono);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--mute-l);
    border-bottom: 1px solid var(--ink);
}

.prose tbody th {
    font-weight: 700;
}

.prose tbody tr:last-child th,
.prose tbody tr:last-child td {
    border-bottom: 0;
}

.prose tr.mine th,
.prose tr.mine td {
    background: #FFE4D8;
}

.prose tr.mine th {
    box-shadow: inset 4px 0 0 var(--orange);
    padding-left: 14px;
}

/* Avisos */
.callout {
    margin: 24px 0;
    padding: 20px 22px;
    background: var(--paper-2);
    border-left: 4px solid var(--orange);
}

.callout p:last-child {
    margin-bottom: 0;
}

.checklist {
    list-style: none;
    padding-left: 0 !important;
}

.checklist li {
    position: relative;
    padding-left: 34px;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .32em;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ink);
    background: #FBF9F4;
}

.sources {
    font-size: .9rem;
    color: var(--mute-l);
}

.sources li {
    margin-bottom: 6px;
}

.sources a {
    color: var(--mute-l);
}

/* Llamada final */
.cta-box {
    position: relative;
    margin-top: clamp(56px, 9vh, 88px);
    padding: clamp(28px, 4vw, 44px);
    background: var(--ink);
    color: var(--bone-2);
}

.cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    --c: var(--orange);
    --l: 14px;
    background:
        linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 0 / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 0 / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 100% / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 100% / 2px var(--l) no-repeat;
}

.prose .cta-box h2 {
    margin-top: 0;
    padding-top: 0;
    border: 0;
    color: var(--bone);
}

.prose .cta-box h2::before {
    content: none;
}

.prose .cta-box strong {
    color: var(--bone);
}

.cta-box .btn {
    margin-top: 8px;
}

.prose .cta-box a.btn {
    color: var(--ink);
    text-decoration: none;
}

/* Textos legales */
.legal h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    margin: 48px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-l);
}

.legal h2:first-of-type {
    margin-top: 36px;
}

.legal table {
    min-width: 0;
}

.legal .actualizado {
    margin-top: 40px;
    font: 500 .72rem/1.6 var(--mono);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--mute-l);
}

/* ===== PIE (el de la portada) ===== */
.pie {
    padding: clamp(56px, 9vh, 88px) 0 28px;
    background: var(--ink);
    color: var(--bone-2);
    font-size: 1rem;
    line-height: 1.7;
}

.pie-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 40px;
}

/* Simetría: la última columna termina en el borde derecho del contenido */
.pie-grid> :last-child {
    justify-self: end;
}

.pie img {
    height: 28px;
    width: auto;
    margin-bottom: 18px;
}

.pie h2 {
    margin-bottom: 10px;
    font: 500 .78rem/1.4 var(--mono);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #A39D92;
}

.pie ul {
    padding: 0;
    list-style: none;
}

.pie a {
    color: var(--bone);
    text-decoration: none;
}

.pie a:hover {
    color: var(--orange);
}

.pie a[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-underline-offset: 3px;
}

.pie-legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(238, 234, 226, .14);
    font: 400 .78rem/1.6 var(--mono);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #A39D92;
}

/* ===== SOBRE MÍ Y CONTACTO ===== */
/* Retrato del lateral, enmarcado como la ficha */
.retrato {
    margin: 0 0 18px;
    padding: 10px;
    border: 1.5px solid var(--ink);
    background: #FBF9F4;
}

.retrato img {
    display: block;
    width: 100%;
    height: auto;
}

/* Primer párrafo, más grande */
.prose .entrada {
    font-size: clamp(1.15rem, 1.9vw, 1.35rem);
    line-height: 1.55;
    margin-bottom: 18px;
}

/* Botones del lateral de contacto */
.lado-botones {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.lado-botones .btn {
    width: 100%;
    justify-content: flex-start;
}

.btn-linea {
    background: transparent;
    border-color: var(--ink);
}

.btn-linea:hover {
    background: var(--ink);
    color: var(--paper);
}

.doc-principal {
    min-width: 0;
}

/* Formulario de contacto: el mismo que la portada, en una ficha blanca sobre el papel */
.formulario {
    margin-top: clamp(36px, 6vh, 56px);
    padding: clamp(24px, 3.4vw, 40px);
    border: 1.5px solid var(--ink);
    border-radius: var(--r);
    background: #fff;
}

.formulario h2 {
    margin: 0 0 6px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
}

.formulario>p {
    margin: 0;
    color: var(--gris);
}

.formulario input,
.formulario select,
.formulario textarea {
    font: inherit;
    color: inherit;
}

.campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.4;
}

.campo label .op {
    font-weight: 400;
    color: var(--gris);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1.5px solid #8F897E;
    border-radius: var(--r);
    background: #fff;
    font-size: 1.05rem;
    line-height: 1.4;
}

.campo textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.campo .ayuda {
    margin: -2px 0 8px;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--gris);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--ink);
}

.campo.ancho {
    grid-column: 1 / -1;
}

.trampa {
    position: absolute;
    left: -9999px;
}

.consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0 22px;
    line-height: 1.5;
}

.consent input {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--ink);
    flex: none;
}

.consent a {
    color: var(--ink);
    text-decoration-color: var(--orange-t);
    text-underline-offset: 3px;
}

.formulario .btn {
    width: 100%;
}

.form-nota {
    margin: 12px 0 0;
    text-align: center;
    font-size: .92rem;
    color: var(--gris);
}

.form-msg {
    display: none;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--r);
    font-weight: 600;
}

.form-msg.ok {
    background: #E1F3E8;
    color: #0D5C34;
}

.form-msg.err {
    background: #FBE4DC;
    color: #8A2A08;
}

.form-msg.ver {
    display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1060px) {
    .menu {
        display: none;
    }
}

@media (max-width: 900px) {
    .doc {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .art-cab .doc {
        row-gap: 0;
    }

    .doc-cuerpo>.doc-lado {
        position: static;
    }

    /* En el móvil, la ficha legal va después del texto */
    .doc-cuerpo>.doc-lado.al-final {
        order: 2;
    }

}

@media (max-width: 680px) {
    body {
        font-size: 1rem;
    }

    :root {
        --nav-h: 64px;
    }

    .logo img {
        height: 24px;
    }

    .cab .btn {
        min-width: 48px;
        padding: 8px 12px;
    }

    .cab .btn .txt {
        display: none;
    }

    .prose .stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc ol {
        columns: 1;
    }

    .answer {
        padding: 22px 20px;
    }

    .campos {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* El pie pasa a una columna en el mismo punto que en la portada */
@media (max-width: 600px) {
    .pie-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pie-grid> :last-child {
        justify-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

@media print {

    .cab,
    .pie,
    .cta-box,
    .lado-cta {
        display: none;
    }

    .art-cab {
        background: none;
        color: #000;
    }
}