@charset "UTF-8";
/* =====================================================================
   SIERPES 48 · SISTEMA DE DISEÑO (ds.css)
   Fuente oficial: ui-kit/ (tokens.json, componentes.css, README.md y
   COMPONENTES.md). Identidad de Sierpes 48 (negro, dorado, crema,
   DM Serif Display y Gotham) con la maquetación y el ritmo del diseño SATYA.

   Se carga el ÚLTIMO, después de css/ui-mejoras.css (lib/head.php).
   Partes:
     1. Fuentes          4. Componentes del kit (s48-…)
     2. Variables        5. Unificación de las clases antiguas de la web
     3. Estilos de texto 6. Movimiento reducido
   Reglas de oro: el dorado #C59F36 (--gold-500) nunca en textos de menos
   de 24 px (usar --gold-700); nada por debajo de 12 px.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. FUENTES
   Completa la familia "Gotham" con los archivos que ya hay en css/fonts
   (Light 300 y Bold 700). Book 400 y Thin 100 ya están declaradas en
   css/style.css.
   Títulos: DM Serif Display (Google Fonts, licencia libre OFL), guardada
   en css/fuentes para no depender de Google al cargar. Sustituye a
   Elephant (12-nov-2026); la clase .elephant se mantiene y usa esta fuente.
   --------------------------------------------------------------------- */
/* Gotham no tiene los caracteres ² ³ € ×: el navegador los cogía de otra fuente más gruesa.
   Se toman de Montserrat (Google Fonts, licencia libre OFL), casi idéntica a Gotham, solo para
   esos caracteres y en el mismo grosor. Archivo de 4 caracteres en css/fuentes (13-nov-2026). */
/* Una declaración por grosor (300, 400 y 700): si se declara como rango, el navegador deja de cargar Gotham Light */
@font-face {
    font-family: 'Gotham';
    src: url('fuentes/Montserrat-simbolos.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+00B2-00B3, U+00D7, U+20AC;
}
@font-face {
    font-family: 'Gotham';
    src: url('fuentes/Montserrat-simbolos.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+00B2-00B3, U+00D7, U+20AC;
}
@font-face {
    font-family: 'Gotham';
    src: url('fuentes/Montserrat-simbolos.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+00B2-00B3, U+00D7, U+20AC;
}
@font-face {
    font-family: 'DM Serif Display';
    src: url('fuentes/DMSerifDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Serif Display';
    src: url('fuentes/DMSerifDisplay-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Light.woff2') format('woff2'),
         url('fonts/Gotham-Light.woff') format('woff'),
         url('fonts/Gotham-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Bold.woff2') format('woff2'),
         url('fonts/Gotham-Bold.woff') format('woff'),
         url('fonts/Gotham-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ---------------------------------------------------------------------
   2. VARIABLES (ui-kit/tokens.json)
   --------------------------------------------------------------------- */
:root {
    /* Color */
    --gold-200: #ffe8a8;      /* acento sobre negro; nunca texto sobre claro */
    --gold-500: #c59f36;      /* solo gráficos y textos de 24 px o más */
    --gold-700: #86671a;      /* dorado para texto pequeño sobre claro */
    --cream-100: #fff6de;     /* secciones alternas */
    --cream-50: #fdfbf6;      /* tarjetas sobre crema, formularios */
    --gray-100: #f2f2f2;      /* fondo gris claro (banner de marcas, 13-nov) */
    --surface: #ffffff;
    --black: #000000;
    --ink: #1a1a1a;           /* texto principal */
    --ink-soft: #383838;      /* párrafos largos */
    --ink-muted: #6b6b6b;     /* texto secundario sobre claro */
    --on-dark: #ffffff;
    --on-dark-muted: #b3b3b3;
    --line: #e0e0e0;
    --line-dark: #3a3a3a;

    /* Tipografía */
    --font-display: 'DM Serif Display', Georgia, serif;
    --bs-font-secondary: var(--font-display);   /* .elephant y estilos antiguos */
    --font-sans: 'Gotham', Arial, sans-serif;

    /* Espacios */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Radios y sombras */
    --radius-none: 0;
    --radius-xs: 3px;
    --radius-round: 9999px;
    --shadow-header: 0 5px 7px 0 rgba(35, 33, 34, 0.2);
    --shadow-hover: 0 18px 40px 0 rgba(0, 0, 0, 0.08);

    /* Medidas */
    --container-max: 1280px;
    --column-gap: 112px;
    --text-column: 548px;
    --text-max: 760px;
    --header-height: 60px;
    --button-height: 45px;
    --accent-width: 48px;

    /* Ritmo de secciones: 128 px en escritorio, 64 px en móvil */
    --section-y: var(--space-10);
    --section-head-gap: var(--space-8);   /* cabecera de sección → contenido */

    /* Escala de texto (escritorio). Los valores de móvil están más abajo. */
    --fs-display: 72px;  --lh-display: 76px;
    --fs-title-1: 64px;  --lh-title-1: 70px;
    --fs-title-2: 52px;  --lh-title-2: 58px;
    --fs-title-3: 30px;  --lh-title-3: 36px;
    --fs-title-4: 22px;  --lh-title-4: 28px;
    --fs-stat: 88px;     --lh-stat: 88px;
    --fs-quote: 40px;    --lh-quote: 50px;
    --fs-lead: 19px;     --lh-lead: 30px;
    --fs-body: 16px;     --lh-body: 26px;
    --fs-body-small: 14px; --lh-body-small: 21px;
    --fs-eyebrow: 12px;   /* 13-nov: antes 13 px; 12 es el mínimo de la web */
    --fs-label: 13px;
    --fs-number: 24px;   --lh-number: 28px;   /* precios en tarjetas (12-nov: antes 32) */
    --fs-caption: 12px;  --lh-caption: 16px;

    /* Puentes con las variables que ya usaba ui-mejoras.css */
    --s48-seccion: var(--section-y);
    --s48-bloque: var(--section-head-gap);
    --s48-dorado-texto: var(--gold-700);
    --s48-dorado-grande: var(--gold-500);
    --s48-gris-texto: var(--ink-muted);
}

/* Móvil (menos de 768 px) */
@media (max-width: 767.98px) {
    :root {
        --section-y: var(--space-8);
        --fs-display: 44px;  --lh-display: 48px;
        --fs-title-1: 40px;  --lh-title-1: 46px;
        --fs-title-2: 34px;  --lh-title-2: 40px;
        --fs-title-3: 24px;  --lh-title-3: 30px;
        --fs-title-4: 20px;  --lh-title-4: 26px;
        --fs-stat: 56px;     --lh-stat: 56px;
        --fs-quote: 28px;    --lh-quote: 36px;
        --fs-lead: 17px;     --lh-lead: 27px;
        --fs-number: 22px;   --lh-number: 26px;
    }
}


/* ---------------------------------------------------------------------
   3. ESTILOS DE TEXTO
   --------------------------------------------------------------------- */
.display, .title-1, .title-2, .title-3, .title-4, .stat, .quote {
    font-family: var(--font-display);
    font-weight: 400;
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); }
.title-1 { font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: -0.01em; }
.title-2 { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: -0.01em; }
.title-3 { font-size: var(--fs-title-3); line-height: var(--lh-title-3); }
.title-4 { font-size: var(--fs-title-4); line-height: var(--lh-title-4); }
.stat    { font-size: var(--fs-stat);    line-height: var(--lh-stat); letter-spacing: -0.01em; }
.quote   { font-size: var(--fs-quote);   line-height: var(--lh-quote); }

.lead, .body, .body-small, .eyebrow, .label, .number, .caption { font-family: var(--font-sans); }
.lead       { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }
.body       { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 300; }
.body-small { font-size: var(--fs-body-small); line-height: var(--lh-body-small); font-weight: 300; }
.eyebrow    { font-size: var(--fs-eyebrow); line-height: 16px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
.label      { font-size: var(--fs-label); line-height: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.number     { font-size: var(--fs-number); line-height: var(--lh-number); font-weight: 700; }
.caption    { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 400; }


/* ---------------------------------------------------------------------
   4. COMPONENTES (ui-kit/componentes.css + medidas de COMPONENTES.md)
   --------------------------------------------------------------------- */
.s48 { font-family: var(--font-sans); color: var(--ink); }

/* ---------- Sección y rejilla (maquetación) ---------- */
.s48-section { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; margin: 0 !important; }
.s48-section--cream { background-color: var(--cream-100); }
.s48-section--black { background-color: var(--black); color: var(--on-dark); }
.s48-container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--space-5)); margin-inline: auto; padding-inline: var(--space-5); }
.s48-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.s48-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) { .s48-grid, .s48-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .s48-grid, .s48-grid--4 { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---------- Button ---------- */
.s48-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--button-height); padding: var(--space-3) var(--space-5);
    font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 400;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
    border: 1px solid transparent; border-radius: var(--radius-none); cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.s48-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.s48-btn:active { transform: none; box-shadow: none; }
.s48-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.s48-btn--primary { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.s48-btn--primary:hover { background: var(--gold-200); color: var(--ink); border-color: var(--gold-200); }
.s48-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.s48-btn--secondary:hover { background: var(--ink); color: var(--on-dark); }
.s48-btn--on-dark { background: var(--gold-200); color: var(--ink); border-color: var(--gold-200); }
.s48-btn--on-dark:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.s48-btn--ghost-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.s48-btn--ghost-dark:hover { background: var(--on-dark); color: var(--ink); }
.s48-btn--small { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: 12px; }
.s48-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Section heading ---------- */
.s48-heading { max-width: var(--text-max); margin-bottom: var(--section-head-gap); }
.s48-heading--center { margin-inline: auto; text-align: center; }
.s48-heading .eyebrow { color: var(--gold-700); margin: 0 0 var(--space-5); }
.s48-heading h2, .s48-heading h1 { margin: 0; color: var(--ink); }
.s48-heading .s48-accent { margin: var(--space-5) 0; }
.s48-heading--center .s48-accent { margin-inline: auto; }
.s48-heading p.lead { margin: 0; color: var(--ink-soft); }
.s48-heading > :last-child { margin-bottom: 0; }
.s48-dark { background: var(--black); color: var(--on-dark); }
.s48-dark .s48-heading .eyebrow { color: var(--gold-200); }
.s48-dark .s48-heading h2 { color: var(--on-dark); }
.s48-dark .s48-heading p.lead { color: var(--on-dark-muted); }

/* ---------- Accent ---------- */
.s48-accent { display: block; width: var(--accent-width); height: 2px; background: var(--gold-500); }
.s48-dark .s48-accent { background: var(--gold-200); }

/* ---------- TextLink ---------- */
.s48-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.s48-link::after { content: "\2192"; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.s48-link:hover { color: var(--ink); }
.s48-link:hover::after { transform: translateX(4px); }
.s48-dark .s48-link { color: var(--on-dark); }

/* ---------- Stat band ---------- */
.s48-stats { background: var(--black); padding: var(--space-7) var(--space-5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); text-align: center; }
.s48-stats .stat { color: var(--gold-200); margin: 0 0 var(--space-2); font-size: 56px; line-height: 60px; }
.s48-stats .caption { color: var(--on-dark-muted); margin: 0; }
@media (max-width: 767.98px) {
    .s48-stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
    .s48-stats .stat { font-size: 40px; line-height: 44px; }
}

/* ---------- Stat ---------- */
.s48-stat .stat { color: var(--ink); margin: 0 0 var(--space-2); }
.s48-stat .body-small { color: var(--ink-muted); margin: 0; }
.s48-dark .s48-stat .stat { color: var(--gold-200); }
.s48-dark .s48-stat .body-small { color: var(--on-dark-muted); }

/* ---------- Space card ---------- */
.s48-card { display: flex; flex-direction: column; background: transparent; border: 0; color: var(--ink); text-decoration: none; transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .5s ease; }
.s48-card:hover { color: var(--ink); }
.s48-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-100); }
.s48-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.s48-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) 0 0; }
.s48-card .eyebrow { color: var(--gold-700); margin: 0 0 var(--space-2); }
.s48-card .title-4 { margin: 0 0 var(--space-2); }
.s48-card .body-small { color: var(--ink-muted); margin: 0 0 var(--space-5); }
.s48-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.s48-card__foot p { margin: 0; }
.s48-card__foot .caption { color: var(--ink-muted); white-space: nowrap; }
.s48-card__arrow { color: var(--gold-500); font-size: 22px; line-height: 1; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.s48-card:hover { transform: none; }
.s48-card:hover .s48-card__media img { transform: scale(1.04); }
.s48-card:hover .s48-card__arrow { transform: translateX(6px); }

/* ---------- Plan card ---------- */
.s48-plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--gold-500); padding: var(--space-6) var(--space-5); }
.s48-plan--featured { background: var(--cream-100); }
.s48-plan .eyebrow { color: var(--gold-700); margin: 0 0 var(--space-2); }
.s48-plan .title-4 { margin: 0 0 var(--space-2); }
.s48-plan .body-small { color: var(--ink-muted); margin: 0 0 var(--space-5); }
.s48-plan .caption { color: var(--ink-muted); }
.s48-plan .s48-list { margin: var(--space-5) 0 var(--space-6); }
.s48-plan .s48-btn { margin-top: auto; align-self: flex-start; }

/* ---------- Feature list ---------- */
.s48-list { list-style: none; padding: 0; margin: 0; }
.s48-list li { position: relative; padding: var(--space-1) 0 var(--space-1) 20px; }   /* 13-nov: sin líneas separadoras */
.s48-list li::before { content: ""; position: absolute; left: 2px; top: calc(var(--space-1) + 0.75em - 3px); top: calc(var(--space-1) + 0.5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }   /* punto en lugar de guion */
.s48-dark .s48-list li { color: var(--on-dark); }
.s48-dark .s48-list li::before { background: var(--gold-200); }
@media (min-width: 768px) {
    .s48-list--cols { columns: 2; column-gap: var(--space-6); }
    .s48-list--cols li { break-inside: avoid; }
}

/* ---------- Step ---------- */
.s48-step .number { color: var(--gold-500); margin: 0 0 var(--space-5); font-size: 32px; line-height: 32px; }   /* 01-02-03: dato decorativo, mantiene 32 */
.s48-step hr { border: 0; border-top: 1px solid var(--line); margin: 0 0 var(--space-5); opacity: 1; }
.s48-step .title-4 { margin: 0 0 var(--space-4); }
.s48-step .body-small { color: var(--ink-soft); margin: 0; }

/* ---------- SplitBlock ---------- */
.s48-split { display: grid; grid-template-columns: 620fr 548fr; column-gap: var(--column-gap); align-items: center; }
.s48-split--reverse .s48-split__media { order: 2; }
.s48-split__media img { width: 100%; aspect-ratio: 31 / 30; object-fit: cover; display: block; }
.s48-split__text .eyebrow { color: var(--gold-700); margin: 0 0 var(--space-5); }
.s48-split__text .title-2,
.s48-split__text .title-3 { margin: 0; }
.s48-split__text .s48-accent { margin: var(--space-5) 0; }
.s48-split__text .lead { color: var(--ink-soft); margin: 0 0 var(--space-6); }
.s48-dark .s48-split__text .eyebrow { color: var(--gold-200); }
.s48-dark .s48-split__text .lead { color: var(--on-dark-muted); }
@media (max-width: 1199.98px) { .s48-split { column-gap: var(--space-8); } }
@media (max-width: 767.98px) {
    .s48-split { grid-template-columns: 1fr; row-gap: var(--space-6); }
    .s48-split--reverse .s48-split__media { order: 0; }
}

/* ---------- QuoteBand ---------- */
.s48-quote { position: relative; display: grid; place-items: center; min-height: 360px; padding: var(--space-9) var(--space-6); text-align: center; background-color: var(--black); background-size: cover; background-position: center; }
.s48-quote::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.s48-quote blockquote { position: relative; max-width: 1000px; margin: 0; color: var(--on-dark); }
.s48-quote .s48-accent { margin: var(--space-5) auto 0; background: var(--gold-200); }
.s48-quote figcaption { position: relative; margin-top: var(--space-5); color: var(--on-dark-muted); }

/* ---------- Accordion (zonas) ---------- */
.s48-accordion { border-top: 1px solid var(--line); }
.s48-accordion details { border-bottom: 1px solid var(--line); }
.s48-accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-1); transition: padding .4s ease; }
.s48-accordion summary::-webkit-details-marker { display: none; }
.s48-accordion summary:hover { padding-left: var(--space-3); }
.s48-accordion .stat { color: var(--gold-500); min-width: 40px; margin: 0; }
.s48-accordion .s48-accordion__title { flex: 1; display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.s48-accordion .caption { color: var(--ink-muted); }
.s48-accordion__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.s48-accordion__icon::before, .s48-accordion__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--ink); transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.s48-accordion__icon::after { transform: rotate(90deg); }
.s48-accordion details[open] .s48-accordion__icon::after { transform: rotate(0); }
.s48-accordion__panel { padding: 0 0 var(--space-7); animation: s48-open .6s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- FAQ ---------- */
.s48-faq details { border-bottom: 1px solid var(--line); padding: var(--space-5) 0; }
.s48-faq details:first-child { border-top: 1px solid var(--line); }
.s48-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.s48-faq summary::-webkit-details-marker { display: none; }
.s48-faq summary::after { content: "+"; font-family: var(--font-sans); font-size: 24px; line-height: 1; color: var(--gold-500); transition: transform .3s ease; }
.s48-faq details[open] summary::after { transform: rotate(45deg); }
.s48-faq details p { margin: var(--space-4) 0 0; color: var(--ink-soft); animation: s48-open .4s ease both; }

/* ---------- Header ---------- */
.s48-header { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); padding: 0 var(--space-6); background: rgba(0, 0, 0, .85); border-bottom: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--shadow-header); }
.s48-header__logo { height: 22px; display: block; }
.s48-header__actions { display: flex; align-items: stretch; height: 100%; }
.s48-header .s48-btn--small { align-self: center; color: var(--gold-200); border-color: var(--gold-200); background: transparent; margin-right: var(--space-5); }
.s48-header .s48-btn--small:hover { background: var(--gold-200); color: var(--ink); }
.s48-header__menu { width: 60px; display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.6); color: var(--on-dark); font-size: 18px; }

/* ---------- Ampliaciones del kit (piezas reutilizables de las páginas) ---------- */

/* SpaceCard sobre fondo crema y foto a media altura (decisión del 12-nov para la portada) */
.s48-card--crema { background: var(--cream-100); }
.s48-card--crema .s48-card__media { aspect-ratio: 8 / 3; }
.s48-card--crema .s48-card__body { padding: var(--space-5); }

/* Etiquetas de características dentro de una tarjeta */
.s48-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-5); }
.s48-chips li { padding: var(--space-1) var(--space-3); border: 1px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); }   /* 13-nov: sin fondo, borde negro, esquinas apenas redondeadas */

/* Panel de una zona del acordeón: texto + lista a la izquierda, fotos 4:3 a la derecha */
.s48-zona { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: center; }
.s48-zona .s48-list { margin: var(--space-4) 0 var(--space-6); }
.s48-zona__fotos { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); }
.s48-zona__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 991.98px) { .s48-zona { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .s48-zona__fotos { grid-template-columns: 1fr; } .s48-zona__fotos picture + picture { display: none; } }

/* Pasos: hueco space-7 entre columnas */
.s48-steps { gap: var(--space-7); }

/* Antetítulo dentro de la banda de cita */
.s48-quote .eyebrow { color: var(--gold-200); margin: 0 0 var(--space-5); }
.s48-quote .quote { margin: 0 auto; }

@keyframes s48-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }


/* ---------------------------------------------------------------------
   5. UNIFICACIÓN: las clases que ya usa la web siguen la escala del kit
   --------------------------------------------------------------------- */

/* Texto base: Gotham 16/26 */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 300;
    color: var(--ink);
}
.light { font-weight: 300; }

/* Títulos: DM Serif Display con la escala del kit (si llevan .gotham, mantienen Gotham) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: 400; }
h1, .h1 { font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--fs-title-3); line-height: var(--lh-title-3); }
h4, .h4,
h5, .h5 { font-size: var(--fs-title-4); line-height: var(--lh-title-4); }
h6, .h6 { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.elephant { font-family: var(--font-display); }
.gotham { font-family: var(--font-sans); }

/* Tamaños antiguos → escala del kit (nada por debajo de 12 px) */
.normal  { font-size: var(--fs-body) !important; }
.xs      { font-size: var(--fs-body) !important; }        /* antes 18 px → body 16 */
.xxs     { font-size: var(--fs-body-small) !important; }  /* antes 16 px → body-small 14 */
.xxxs    { font-size: var(--fs-caption) !important; }     /* antes 14 px → caption 12 */
.xxxxs   { font-size: var(--fs-caption) !important; }     /* antes 12 px → caption 12 */
.xxxxxs  { font-size: var(--fs-caption) !important; }     /* antes 8 px (ilegible) → 12 */
.business p:last-child { font-size: var(--fs-caption); }  /* antes 0,4 rem */

/* Antetítulo antiguo (<p class="xs … gotham"> justo encima de un título) → eyebrow */
p.xs.gotham:has(+ h1, + h2, + h3, + blockquote) {
    font-size: var(--fs-eyebrow) !important;
    line-height: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
}

/* Colores de texto */
.text-primary-oscuro,
.primaryOscuro { color: var(--gold-700) !important; }    /* #C59F36 no se usa en texto pequeño */
.opacidadTextosSecundarios { color: var(--ink-muted); opacity: 1; }
.bg-black .opacidadTextosSecundarios,
.s48-dark .opacidadTextosSecundarios,
.text-white.opacidadTextosSecundarios { color: var(--on-dark-muted) !important; }
.tarjetaEspacio .categoria,
.planCoworking .categoria,
.eventosTipos .tipoEvento .numero { color: var(--gold-700); }

/* Botones: estilo único del kit (45 px, 13 px en mayúsculas, recto, ancho según el texto) */
.btn {
    --bs-btn-padding-y: var(--space-3);
    --bs-btn-padding-x: var(--space-5);
    --bs-btn-font-family: var(--font-sans);
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 16px;
    --bs-btn-border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: auto;
    min-height: var(--button-height);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.btn:not(.w-100), .btn-lg:not(.w-100) { width: auto !important; }
.btn-lg { --bs-btn-font-size: 13px; --bs-btn-padding-y: var(--space-3); --bs-btn-padding-x: var(--space-5); }
.btn-primary {                       /* = s48-btn--primary */
    --bs-btn-bg: var(--ink);
    --bs-btn-color: var(--on-dark);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--gold-200);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: var(--gold-200);
    --bs-btn-active-bg: var(--gold-200);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-border-color: var(--gold-200);
    background-color: var(--bs-btn-bg);
}
.btn-outline-negro {                 /* = s48-btn--secondary */
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-color: var(--on-dark);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-color: var(--on-dark);
    --bs-btn-active-border-color: var(--ink);
}

/* Botón de la barra superior: el pequeño del kit (36 px) */
header .btn.btnCabecera {
    min-height: 36px;
    padding: var(--space-2) var(--space-4) !important;
    font-size: 12px;
}

/* Contenedor: contenido de 1280 px como máximo en pantallas grandes */
@media (min-width: 1400px) {
    .container-lg, .container { max-width: calc(var(--container-max) + 1.5rem); }
}

/* Relleno vertical de las secciones: 128 px (escritorio) / 64 px (móvil) */
section:not(.main_container) { padding-top: var(--section-y); padding-bottom: var(--section-y); }


/* ---------------------------------------------------------------------
   6. MOVIMIENTO REDUCIDO
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .s48 *, .s48-btn, .s48-card, .s48-card__media img, .s48-accordion__panel, .s48-faq details p {
        transition: none !important;
        animation: none !important;
    }
}


/* =====================================================================
   7. CABECERA Y MENÚ DESPLEGABLE (lib/header.php, 12-nov-2026)
   Componente Header del kit: barra negra de 60 px con logo, "Ver tarifas",
   "Reservar visita" y botón de menú. Todos los enlaces van en el menú.
   Anula las reglas antiguas de style.css / ui-mejoras.css para la cabecera.
   ===================================================================== */
header.s48-cabecera {
    background: rgba(0, 0, 0, .85);
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    box-shadow: var(--shadow-header);
}
.s48-cabecera__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    height: var(--header-height);
}
header.s48-cabecera .logo { margin: 0 !important; display: flex; align-items: center; }
header.s48-cabecera .logo a { display: flex; }
.s48-cabecera__acciones { display: flex; align-items: center; gap: var(--space-3); height: 100%; }
.s48-cabecera__acciones .s48-btn--small { min-height: 36px; }
.s48-cabecera__tel { align-items: center; gap: var(--space-2); margin-right: var(--space-3); }
.s48-cabecera__tel a { color: var(--on-dark); font-size: 13px; text-decoration: none; display: flex; }
.s48-cabecera__tel svg { width: 20px; height: 20px; }

/* Botón de menú: 60 px de ancho con líneas a los lados (kit) */
header.s48-cabecera .iconoMenu {
    display: grid;
    place-items: center;
    width: 60px;
    height: var(--header-height);
    padding: 0 !important;
    margin-left: var(--space-3);
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .6);
    border-right: 1px solid rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: background-color .3s ease;
}
header.s48-cabecera .iconoMenu:hover { background: rgba(255, 255, 255, .08); }
header.s48-cabecera .iconoMenu.active { background: var(--cream-50); }
header.s48-cabecera .iconoMenu:focus-visible { outline: 2px solid var(--gold-200); outline-offset: -4px; }
header.s48-cabecera .iconoMenu.active:focus-visible { outline-color: var(--ink); }
header.s48-cabecera .menu-button { display: flex; margin: 0; }
header.s48-cabecera .menu-button svg { width: 18px !important; height: auto; }

/* Menú desplegable: compacto, en cuatro columnas */
header .s48-menu.menuDesplegado {
    height: auto;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: var(--space-7) 0 var(--space-8);
    background: var(--cream-50);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-header);
}
.s48-menu__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: var(--space-6);
}
header .s48-menu p.eyebrow {
    color: var(--gold-700);
    opacity: 1;
    margin: 0 0 var(--space-4);
    padding: 0;
}
.s48-menu__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
header .s48-menu .s48-menu__lista a {
    display: inline-block;
    margin: 0;
    padding: 4px 0;
    font-family: var(--font-display);   /* todas las columnas en DM Serif Display (12-nov) */
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--gold-500), var(--gold-500));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s cubic-bezier(.22, .61, .36, 1);
}
header .s48-menu .s48-menu__lista a:hover,
header .s48-menu .s48-menu__lista a:focus-visible { background-size: 100% 1px; }
header .s48-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.s48-menu__contacto address { font-style: normal; color: var(--ink-soft); margin: 0 0 var(--space-5); }
.s48-menu__botones { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.s48-menu__redes { display: flex; gap: var(--space-3); }
header .s48-menu .s48-menu__redes a {
    width: 40px; height: 40px; margin: 0;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: border-color .3s ease, background-color .3s ease;
}
header .s48-menu .s48-menu__redes a:hover { border-color: var(--ink); background: var(--surface); }
header .s48-menu .s48-menu__redes svg { width: 18px; height: 18px; }

/* style.css (móvil) ocultaba todos los enlaces menos el primero y añadía márgenes */
header .s48-menu.menuDesplegado ul { padding: 0; }
header .s48-menu.menuDesplegado ul li { display: block !important; }
header .s48-menu.menuDesplegado a,
header .s48-menu.menuDesplegado p { margin-top: 0; }
header .s48-menu.menuDesplegado .s48-menu__botones a { margin: 0; }

/* Velo oscuro detrás del menú abierto (al pulsarlo se cierra) */
header .fondoNegroMenu.active { background: rgba(0, 0, 0, .45); }

header .s48-cabecera__barra { padding-left: 12px; padding-right: 12px; }
@media (max-width: 991.98px) {
    header .s48-cabecera__barra { padding-left: 16px; padding-right: 0; }
    header .s48-menu .container-lg { padding-left: 16px; padding-right: 16px; }
    header.s48-cabecera .iconoMenu { border-right: 0; }
    .s48-menu__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
}
@media (max-width: 767.98px) {
    header .s48-menu.menuDesplegado { padding: var(--space-6) 0 var(--space-7); }
    .s48-menu__col--ancha { grid-column: 1 / -1; }
    .s48-menu__botones .s48-btn { width: 100%; }
}

/* Páginas interiores sin foto de cabecera (12-nov-2026): el contenido empieza
   justo debajo de la barra fija. La portada (.home-v2) mantiene su foto a pantalla completa. */
body:not(.home-v2):has(> header.s48-cabecera) { padding-top: var(--header-height); }

/* Rejilla de dos columnas (p. ej., tarifas de salas), centrada */
.s48-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
@media (max-width: 767.98px) { .s48-grid--2 { grid-template-columns: 1fr; } }

/* Tarifas con número impar de tarjetas: filas de 3 y la última centrada */
.s48-plans { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
.s48-plans > .s48-plan { flex: 0 1 calc((100% - 2 * var(--space-6)) / 3); }
@media (max-width: 991.98px) { .s48-plans > .s48-plan { flex-basis: calc((100% - var(--space-6)) / 2); } }
@media (max-width: 767.98px) { .s48-plans { gap: var(--space-5); } .s48-plans > .s48-plan { flex-basis: 100%; } }

/* Cabecera de página interior (Anatomía del kit, paso 1): SplitBlock con title-1 y precio */
.s48-cabeceraPagina .title-1 { margin: 0; }
.s48-cabeceraPagina .lead { margin-bottom: var(--space-5); }
.s48-cabeceraPagina .s48-precio { margin: 0 0 var(--space-6); }
.s48-cabeceraPagina .s48-actions { align-items: center; gap: var(--space-5); }

/* "Consultar precio" en lugar de una cifra (sala para equipos) */
.s48-consultar { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }

/* =====================================================================
   8. BOTÓN FLOTANTE DE CONTACTO: teléfono (o WhatsApp si se configura) · lib/boton_contacto.php, 13-nov-2026
   Amarillo claro de los botones (gold-200) con icono y texto en negro (contraste 15:1).
   ===================================================================== */
.s48-flotante {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 999998;
    display: inline-flex; align-items: center; gap: var(--space-3);
    min-height: 52px; padding: 10px 22px 10px 14px;
    background: var(--gold-200); color: var(--ink);
    border: 1px solid var(--gold-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .02em;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .3s ease, bottom .35s ease;
}
.s48-flotante:hover { color: var(--ink); background: var(--on-dark); border-color: var(--on-dark); transform: translateY(-2px); }
.s48-flotante:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.s48-flotante__icono { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; }
.s48-flotante__icono svg { width: 30px; height: 30px; display: block; }
.s48-flotante__icono svg path { fill: var(--ink); }
/* En la portada (móvil) sube cuando aparece la barra inferior de acciones, como el botón de cookies */
.home-v2:has(.barraAccion.visible) .s48-flotante { bottom: 5.5rem; }
@media (prefers-reduced-motion: reduce) { .s48-flotante { transition: none; } }

/* =====================================================================
   9. MISMO ANCHO PARA TODOS LOS BOTONES (13-nov-2026)
   Todos los botones normales miden 240 px como mínimo, con el mismo relleno
   lateral; los pequeños de la barra superior, 160 px. Textos de botón: cortos.
   ===================================================================== */
.s48-btn, .btn { min-width: 240px; padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; justify-content: center; text-align: center; }
.s48-btn--small { min-width: 176px; }
/* Excepciones: la barra inferior del móvil reparte el ancho a partes iguales */
.barraAccion .s48-btn { min-width: 0; }
@media (max-width: 575.98px) {
    /* En móvil, los botones sueltos ocupan todo el ancho disponible si no caben dos */
    .s48-btn, .btn { min-width: min(240px, 100%); }
}

/* =====================================================================
   10. CARRUSEL DE FOTOS (lib/slider.php, 13-nov-2026)
   Desliza con scroll-snap (funciona aunque esté dentro de un acordeón cerrado).
   ===================================================================== */
.s48-slider { position: relative; min-width: 0; }
.s48-slider__pista {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.s48-slider__pista::-webkit-scrollbar { display: none; }
.s48-slider__pista:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.s48-slider__foto { flex: 0 0 100%; scroll-snap-align: start; }
.s48-slider__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.s48-slider__controles { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-4); }
.s48-slider__contador { color: var(--ink-muted); min-width: 40px; text-align: center; }
.s48-slider__boton {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0;
    font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .3s ease, color .3s ease;
}
.s48-slider__boton:hover { background: var(--ink); color: var(--on-dark); }
.s48-slider__boton:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .s48-slider__pista { scroll-behavior: auto; } }

/* Listas antiguas (.s48Lista, en css/ui-mejoras.css): mismo formato que las del kit, con puntos y sin líneas (13-nov-2026) */
.s48Lista li { padding: var(--space-1) 0 var(--space-1) 20px; border-bottom: 0; }
.s48Lista li::before { left: 2px; top: calc(var(--space-1) + 0.75em - 3px); top: calc(var(--space-1) + 0.5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background-color: var(--gold-500); }
.s48Lista--oscura li::before { background-color: var(--gold-200); }

/* Foto del bloque de newsletter (lib/suscribete.php): ancho de su columna y alto proporcional (13-nov-2026) */
.img_footer { width: 100%; height: auto; display: block; }

/* Formularios (lib/contacto_reserva.php y lib/contactoStartup.php): no van dentro de una <section>,
   así que reciben aquí el mismo espacio vertical que el resto de secciones (13-nov-2026) */
main form#form_contacto { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: var(--section-y); padding-bottom: var(--section-y); }
/* Contacto: el título de la página y el formulario forman un solo bloque */
.pagina-contacto main > section:first-of-type { padding-bottom: 0; }
.pagina-contacto main form#form_contacto { padding-top: var(--space-7); }

/* =====================================================================
   11. BANNER DE MARCAS (eventos.php, logos en img/clientes, 13-nov-2026)
   Todos los logos en un solo tono (ink-soft) para que el banner sea uniforme.
   ===================================================================== */
.s48-section--gris { background-color: var(--gray-100); }
.s48-marcas .s48-heading { margin-bottom: var(--space-8); }
/* 13-nov: logos más grandes, 3 arriba y 2 abajo (cada logo ocupa un tercio de la fila y la segunda fila se centra) */
.s48-marcas__lista { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: var(--space-8); max-width: 1080px; margin: 0 auto; padding: 0; }
.s48-marcas__logo { flex: 0 0 33.333%; justify-content: center; color: var(--ink-soft); display: flex; align-items: center; opacity: .85; transition: opacity .3s ease; }
.s48-marcas__logo:hover { opacity: 1; }
.s48-marcas__logo svg { display: block; width: auto; max-width: 100%; }
.s48-marcas__logo--rampa-factory svg { height: 64px; }
.s48-marcas__logo--ventum svg { height: 68px; }
.s48-marcas__logo--weddings-with-love svg { height: auto; width: 320px; }
.s48-marcas__logo--artesred svg { height: 66px; }
.s48-marcas__logo--club-juliana svg { height: 72px; }
@media (max-width: 991.98px) {
    .s48-marcas__logo--rampa-factory svg { height: 48px; }
    .s48-marcas__logo--ventum svg { height: 52px; }
    .s48-marcas__logo--weddings-with-love svg { width: 240px; }
    .s48-marcas__logo--artesred svg { height: 50px; }
    .s48-marcas__logo--club-juliana svg { height: 56px; }
}
/* Móvil: dos por fila (2 + 2 + 1); con tres por fila los logos quedarían demasiado pequeños para leerse */
@media (max-width: 767.98px) {
    .s48-marcas__lista { row-gap: var(--space-7); }
    .s48-marcas__logo { flex-basis: 50%; padding-inline: var(--space-3); }
    .s48-marcas__logo--rampa-factory svg { height: 40px; }
    .s48-marcas__logo--ventum svg { height: 44px; }
    .s48-marcas__logo--weddings-with-love svg { width: 170px; }
    .s48-marcas__logo--artesred svg { height: 42px; }
    .s48-marcas__logo--club-juliana svg { height: 48px; }
}
}

/* =====================================================================
   12. TARJETAS EN DESLIZADOR SOLO EN MÓVIL (.s48-grid--slide-movil, 13-nov-2026)
   Se ve asomar la siguiente tarjeta; se pasa con el dedo o con las flechas.
   ===================================================================== */
.s48-slide-movil__controles { display: none; }
@media (max-width: 767.98px) {
    .s48-grid.s48-grid--slide-movil {
        display: flex; gap: var(--space-4);
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
        scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
        scrollbar-width: none;
    }
    .s48-grid--slide-movil::-webkit-scrollbar { display: none; }
    .s48-grid--slide-movil > * { flex: 0 0 85%; scroll-snap-align: start; }
    .s48-slide-movil__controles { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .s48-grid--slide-movil { scroll-behavior: auto; } }

/* Listas sin clase dentro del contenido (páginas legales, Formación…): mismo formato que las del kit (13-nov-2026) */
main ul:not([class]) { list-style: none; padding-left: 0; }
main ul:not([class]) > li { position: relative; padding: var(--space-1) 0 var(--space-1) 20px; margin-bottom: 0; }
main ul:not([class]) > li::before { content: ""; position: absolute; left: 2px; top: calc(var(--space-1) + 0.75em - 3px); top: calc(var(--space-1) + 0.5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }

/* =====================================================================
   13. FORMULARIOS DEL KIT (.s48-form) · presupuesto de eventos (lib/presupuesto_eventos.php, 13-nov-2026)
   ===================================================================== */
.s48-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-7); }
.s48-form legend { color: var(--gold-700); margin-bottom: var(--space-5); font-size: 13px; }
.s48-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
.s48-form__campo { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.s48-form__campo label { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.s48-form__campo input, .s48-form__campo select, .s48-form__campo textarea {
    width: 100%; min-height: 44px; padding: var(--space-2) 0; background: transparent;
    font-family: var(--font-sans); font-size: 16px; color: var(--ink);
    border: 0 !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0;
}
.s48-form__campo textarea { resize: vertical; }
.s48-form__campo input:focus-visible, .s48-form__campo select:focus-visible, .s48-form__campo textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.s48-form__campo .caption { color: var(--ink-muted); }
.s48-form__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.s48-form__check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-soft); margin-bottom: var(--space-3); cursor: pointer; }
/* css/main.css oculta las casillas nativas (float, 0.1 px, opacity 0); aquí se muestran como casillas normales */
.s48-form__check input[type="checkbox"] { float: none; width: 20px; height: 20px; opacity: 1; overflow: visible; flex-shrink: 0; margin: 0; accent-color: var(--ink); cursor: pointer; }
.s48-form__check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.s48-form__check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.s48-form__aviso { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); font-size: 15px; }
.s48-form__aviso--error { background: #fdecec; color: #8a1c1c; border-left: 3px solid #8a1c1c; }
.s48-form__aviso--ok { background: var(--surface); color: var(--ink); border-left: 3px solid var(--gold-700); }
@media (max-width: 767.98px) { .s48-form__fila, .s48-form__opciones { grid-template-columns: 1fr; } }

/* Teléfono en la barra superior (escritorio) */
.s48-cabecera__tel { align-items: center; gap: var(--space-2); margin-right: var(--space-4); color: var(--on-dark); font-size: 13px; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.s48-cabecera__tel:hover { color: var(--gold-200); }
.s48-cabecera__tel:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 3px; }
.s48-cabecera__tel svg { color: var(--gold-200); }

/* Fotos verticales en bloques horizontales: recorte 4:3 (el encuadre se ajusta con object-position en la propia foto) */
.s48-foto-recorte { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* =====================================================================
   14. NORMALIZACIÓN FINAL (revisión completa del 13-nov-2026)
   ===================================================================== */
/* Párrafos sin clase: tamaño de texto del kit (style.css les daba .9rem = 18 px) */
p { font-size: var(--fs-body); line-height: var(--lh-body); }
small, .small { font-size: 14px; }
.roboto { font-family: var(--font-sans) !important; }
#form_suscribirse label { font-size: 13px; }
.eventosEspacios .capacidad { font-size: var(--fs-number); line-height: var(--lh-number); font-weight: 700; }

/* Espacios: las cabeceras y galerías antiguas siguen el ritmo del kit (128 px escritorio / 64 px móvil) */
.salaDeReunion, .serviciosParaEvento { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }

/* Tablas largas (política de cookies): se desplazan dentro de su caja en móvil, sin salirse de la pantalla */
main table { display: block; max-width: 100%; overflow-x: auto; }

/* Iconos de redes del pie: zona táctil de 44 x 44 px */
footer .social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* reCAPTCHA: el sello flotante de Google tapaba el botón de WhatsApp; se oculta y el aviso va en el pie */
.grecaptcha-badge { visibility: hidden !important; }
.s48-recaptcha { color: var(--on-dark-muted); padding-inline: var(--space-4); }
.s48-recaptcha a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Servicios en móvil: desplegable nativo sobre fondo negro (index.php) */
.s48-selector-servicios { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.s48-selector-servicios .eyebrow { color: var(--gold-200); margin: 0; }
.s48-select {
    width: 100%; min-height: 52px; padding: 0 48px 0 var(--space-4);
    font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--on-dark); background-color: transparent;
    border: 1px solid var(--gold-200) !important; border-radius: 0;
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffe8a8' stroke-width='1.5' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--space-4) center;
}
.s48-select:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 3px; }
.s48-select option { color: var(--ink); background: var(--surface); text-transform: none; font-weight: 400; }

/* =====================================================================
   15. MISMO BORDE QUE LAS ETIQUETAS EN BOTONES Y TARJETAS (13-nov-2026)
   Etiquetas (.s48-chips): 1 px negro y esquinas de 3 px (--radius-xs).
   ===================================================================== */
/* Botones: esquinas de 3 px (el color del borde depende del tipo de botón) */
.s48-btn, .btn, .s48-flotante, .s48-select, #cc--main .c-bn { border-radius: var(--radius-xs) !important; }
/* Tarjetas: borde negro de 1 px y esquinas de 3 px; la foto se recorta con la esquina */
/* 13-nov (tarde): sin filo negro. Las tarjetas crema van sin borde; las de tarifas recuperan el filo del kit (gris + línea dorada arriba) */
.s48-card--crema, .s48-plan { border-radius: var(--radius-xs); overflow: hidden; }
.s48-card--crema { border: 0; }

/* =====================================================================
   16. FOTO DE CABECERA DE LAS PÁGINAS INTERIORES (13-nov-2026)
   Todas en formato 1:1 y del mismo tamaño (620 px como máximo, el ancho de imagen del kit).
   La foto se recorta centrada; para mover el encuadre, usar object-position en la imagen.
   ===================================================================== */
.s48-foto-cabecera { display: block; width: 100%; max-width: 620px; margin-inline: auto; }
.s48-foto-cabecera img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* Bloque invertido (foto a la derecha): la foto conserva la columna ancha de 620 y el texto la de 548 */
@media (min-width: 768px) { .s48-split--reverse { grid-template-columns: 548fr 620fr; } }

/* =====================================================================
   17. SECCIONES SEGUIDAS CON EL MISMO FONDO (13-nov-2026)
   Cada sección lleva 128 px arriba y abajo (64 en móvil). Si dos seguidas tienen el mismo fondo,
   los espacios se sumaban (256 px). La segunda pierde el espacio de arriba y queda un único hueco de 128.
   Si se añade una sección nueva entre dos del mismo fondo, revisar esta lista.
   ===================================================================== */
.salaDeReunion + .s48-section:not(.s48-section--cream):not(.s48-section--gris),
.salaDeReunion + .serviciosParaEvento,
.serviciosParaEvento + .s48-section:not(.s48-section--cream):not(.s48-section--gris),
.serviciosParaEvento + .eventosTipos,
#sala-equipos + #oficina-virtual,
#preguntas-frecuentes:not(.s48-section--cream) + #form_contacto,
#preguntas-frecuentes:not(.s48-section--cream) + section.s48-seccion:not(.s48-seccion--fondo),
section.s48-seccion:not(.s48-seccion--fondo):not(.bg-black) + #preguntas-frecuentes:not(.s48-section--cream),
section.s48-seccion:not(.s48-seccion--fondo):not(.bg-black) + #form_contacto,
.s48-section--cream + .sectoresPrioritarios,
.s48-section--cream + script + .sectoresPrioritarios { padding-top: 0 !important; }  /* lib/dondeEstamosMapa.php mete un <script> delante */