/*
Theme Name: Events One To One
Theme URI: https://eventsonetoone.com.bo
Author: Events One To One
Description: Tema propio de la web pública. Identidad editorial de WEB-1 (WEB3E_TEMA_DISENO.md).
Version: 1.1.0
Text Domain: e1to1
*/

/* ==========================================================================
   1. Tipografías propias · autoalojadas, sin CDN (WEB3E §3)
   Variables: un solo archivo por familia cubre 300-700.
   Licencias en assets/fonts/OFL-*.txt
   ========================================================================== */

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Identidad · los únicos colores y tipos del sitio (WEB3E §3)
   ========================================================================== */

:root {
    --marfil: #f9f7f4;
    --arena: #e9e0d5;
    --arena-clara: #f2ece4;
    --carbon: #232323;
    --carbon-suave: #5d5a55;
    --azul-profundo: #415768;
    --azul-humo: #738391;
    --dorado: #b89a6a;
    --rosa: #efd9da;
    --linea: #ded6cb;

    --font-titulos: "Cormorant Garamond", Canela, Georgia, "Times New Roman", serif;
    --font-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --ancho: 1280px;
    --aire: clamp(56px, 8vw, 112px);
    --margen: clamp(20px, 5vw, 56px);

    /* Compatibilidad con plantillas que todavía nombran los tokens viejos. */
    --ink: var(--carbon);
    --muted: var(--carbon-suave);
    --cream: var(--marfil);
    --paper: #fff;
    --soft: var(--arena-clara);
    --line: var(--linea);
    --gold: var(--dorado);
    --gold-dark: var(--azul-profundo);
    --green: var(--azul-profundo);
    --green-dark: var(--carbon);
    --radius: 4px;
    --shadow: none;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--marfil);
    color: var(--carbon);
    font-family: var(--font-texto);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--azul-profundo);
    outline-offset: 3px;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-titulos);
    font-weight: 500;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; }
h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.08; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
p { margin: 0 0 1.1em; }

/* ==========================================================================
   Sistema tipográfico · cuatro voces, ninguna más (revisión de Sergio, 13/09)
   1. TÍTULO   Cormorant Garamond 500 — h1/h2/h3, .quote, nombres del pie.
   2. TEXTO    Inter 400 — 17px de lectura, 15px en contextos densos.
   3. ETIQUETA Inter 600 versalitas 0.18em, 12px — un solo tamaño; lo que
               cambia entre una etiqueta y otra es el color, nunca la forma.
   4. CITA     Cormorant itálica — frases de marca y avisos editoriales.
   Cualquier texto nuevo entra en una de estas cuatro. Si no entra, el
   problema es el texto, no el sistema.
   ========================================================================== */

.eyebrow,
.paquete-grupo-titulo,
.espacio-medio-medida,
.quote-author,
.meeting-form label,
.credit-list span,
.text-link,
.site-nav a,
.menu-boton,
.button,
.footer-lema,
.footer-heading {
    font-family: var(--font-texto);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--azul-profundo);
}

/* Voz 4 · la cita editorial. Sin recuadro y sin fondo: en esta página el
   énfasis lo da la letra, no una caja de color. */
.cita-editorial,
.customization-notice,
.paquete-heredado,
.footer-tagline,
.footer-firma {
    font-family: var(--font-titulos);
    font-style: italic;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--azul-profundo);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 28px;
    border: 1px solid var(--azul-profundo);
    border-radius: 2px;
    background: var(--azul-profundo);
    color: #fff;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}
.button:hover { background: transparent; color: var(--azul-profundo); }
.button--claro { border-color: rgba(255, 255, 255, .75); background: transparent; color: #fff; }
.button--claro:hover { background: #fff; color: var(--carbon); }

.text-link {
    display: inline-block;
    color: var(--azul-profundo);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: opacity .25s ease;
}
.text-link:hover { opacity: .62; }

.skip-link {
    position: fixed;
    z-index: 300;
    top: 12px;
    left: 12px;
    transform: translateY(-180%);
    padding: 10px 16px;
    background: var(--marfil);
    color: var(--carbon);
    text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   4. Cabecera y menú (WEB3E §5)
   Por defecto: fija arriba, marfil. En la portada: sobre el hero, transparente;
   `tema.js` la vuelve sólida al desplazarse. Sin JavaScript se comporta como
   una cabecera normal que se desplaza con la página: nunca queda ilegible.
   ========================================================================== */

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 18px var(--margen);
    background: var(--marfil);
    border-bottom: 1px solid var(--linea);
}
.site-logo { display: inline-flex; color: var(--carbon); line-height: 0; }
.site-logo svg { width: auto; height: 56px; }
.site-logo--pie svg { height: 108px; }

/* El menú vive en un <details> para funcionar en móvil sin JavaScript. En
   escritorio la lista se muestra siempre, esté abierto o no. */
.site-nav { margin-left: auto; }
.site-nav > ul {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav a {
    color: inherit;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
}
.site-nav a:hover, .site-nav .is-active a { border-color: currentColor; }
.menu-interruptor { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menu-boton { display: none; color: inherit; cursor: pointer; }
.menu-interruptor:focus-visible + .site-nav .menu-boton { outline: 2px solid currentColor; outline-offset: 3px; }
.header-cta { margin-left: 4px; min-height: 42px; padding: 11px 20px; }

/* Portada: cabecera sobre el hero */
.site-header--hero {
    position: absolute;
    inset: 0 0 auto;
    background: transparent;
    border-bottom: 0;
    color: #fff;
}
.site-header--hero .site-logo { color: #fff; }
.site-header--hero .header-cta { border-color: rgba(255, 255, 255, .75); background: transparent; color: #fff; }
.site-header--hero .header-cta:hover { background: #fff; color: var(--carbon); }
.site-header.esta-fija {
    position: fixed;
    background: var(--marfil);
    border-bottom: 1px solid var(--linea);
    color: var(--carbon);
    animation: bajar .35s ease;
}
.site-header.esta-fija .site-logo { color: var(--carbon); }
.site-header.esta-fija .site-logo svg { height: 44px; }
.site-header.esta-fija .header-cta { border-color: var(--azul-profundo); background: var(--azul-profundo); color: #fff; }
@keyframes bajar { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ==========================================================================
   5. Hero de portada (WEB3E §6.1)
   Base siempre oscura: el titular y el logo blanco se leen con foto, con
   video o con el hueco de medio.
   ========================================================================== */

.hero-portada {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: 140px var(--margen) 84px;
    background: linear-gradient(160deg, #2b2b2b, #14181b);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.hero-medio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Vimeo/YouTube entregan un marco 16:9 que no sabe recortarse solo: se agranda
   hasta tapar el hueco por el lado que falte y se centra. Decorativo, nunca
   clicable — el reproductor no debe robar el clic del titular. */
.hero-medio--embed { pointer-events: none; }
.hero-medio--embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    border: 0;
    transform: translate(-50%, -50%);
}
.hero-portada::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 20, 20, .55), rgba(20, 20, 20, .28) 45%, rgba(20, 20, 20, .68));
    content: "";
}
/* El contenido queda centrado y la franja del hueco al pie, ambos en el flujo:
   nunca se superponen, en ningún ancho. */
.hero-inner {
    position: relative;
    z-index: 2;
    width: min(820px, 100%);
    margin: auto;
}
.hero-portada > .hero-espacio { margin-top: auto; }
.hero-inner .eyebrow { color: rgba(255, 255, 255, .82); }
.hero-inner h1 {
    margin: 22px 0 18px;
    font-size: clamp(44px, 7vw, 96px);
    line-height: 1.02;
    font-weight: 500;
}
.hero-inner p {
    margin: 0 auto 34px;
    max-width: 560px;
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
}
.hero-espacio { position: relative; z-index: 2; width: 100%; }
.hero-bajar {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .85);
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ==========================================================================
   6. Sistema de secciones
   ========================================================================== */

.section {
    width: min(var(--ancho), 100%);
    margin: auto;
    padding: var(--aire) var(--margen);
}
.section.alt, .section.soft {
    width: 100%;
    max-width: none;
    background: var(--arena-clara);
}
.section.alt > *, .section.soft > * {
    width: min(var(--ancho), 100%);
    margin-right: auto;
    margin-left: auto;
}
.section h1, .section h2 { margin: 10px 0 20px; }
.section-intro {
    max-width: 620px;
    margin-bottom: 44px;
    color: var(--carbon-suave);
}
.section-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: end; justify-content: space-between; margin-bottom: 40px; }
.section-head h2 { margin-bottom: 0; }
.section-pie { margin-top: 44px; }

/* Aparición al entrar en pantalla (tema.js) */
.revela { opacity: 0; transform: translateY(16px); }
.revela.es-visible { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .6s ease-out; }

/* ==========================================================================
   7. Hueco de medio (WEB3E §4)
   ========================================================================== */

.espacio-medio {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background: var(--arena);
    color: var(--carbon);
    overflow: hidden;
}
.espacio-medio--rosa { background: var(--rosa); }
.espacio-medio--oscuro {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}
.espacio-medio::after {
    position: absolute;
    top: 50%;
    right: 8%;
    width: clamp(58px, 11%, 130px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    border: 1px solid var(--dorado);
    border-radius: 50%;
    content: "";
}
.espacio-medio--oscuro::after { border-color: rgba(255, 255, 255, .55); }
.espacio-medio .eyebrow { position: relative; z-index: 1; }
.espacio-medio--oscuro .eyebrow { color: rgba(255, 255, 255, .8); }
.espacio-medio-datos { position: relative; z-index: 1; max-width: 78%; }
.espacio-medio-tipo {
    display: block;
    font-family: var(--font-titulos);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.1;
}
.espacio-medio-uso { display: block; margin-top: 4px; font-size: 15px; color: var(--carbon-suave); }
.espacio-medio--oscuro .espacio-medio-uso { color: rgba(255, 255, 255, .82); }
.espacio-medio-medida { display: block; margin-top: 10px; }
.espacio-medio--oscuro .espacio-medio-medida { color: rgba(255, 255, 255, .7); }

/* Con fotografía de ejemplo: se ve la imagen y el dato sigue legible sobre una
   banda de marfil al pie. Nunca en producción. */
.espacio-medio--muestra { justify-content: flex-end; padding: 0; }
.espacio-medio--muestra::after { content: none; }
.espacio-medio-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.espacio-medio--muestra > .eyebrow {
    position: absolute;
    top: 14px;
    left: 16px;
    padding: 5px 10px;
    background: rgba(249, 247, 244, .92);
}
.espacio-medio--muestra .espacio-medio-datos {
    max-width: none;
    padding: 12px 16px 14px;
    background: rgba(249, 247, 244, .94);
}
.espacio-medio--muestra .espacio-medio-uso { margin-top: 0; color: var(--carbon); }
.espacio-medio--muestra .espacio-medio-medida { margin-top: 4px; }

/* Variante de una línea: para el hero y cualquier sitio donde un bloque
   taparía la composición. Sin círculo y sin proporción propia. */
.espacio-medio--franja {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    padding: 12px 20px;
    text-align: center;
}
.espacio-medio--franja::after { content: none; }
.espacio-medio--franja .espacio-medio-uso { display: inline; margin: 0; font-size: 13px; }
.espacio-medio--franja .espacio-medio-medida { margin: 0; }

/* ==========================================================================
   8. Manifiesto (WEB3E §6.2)
   ========================================================================== */

.manifiesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.manifiesto-texto h2 { margin: 14px 0 24px; }
.manifiesto-texto p { color: var(--carbon-suave); max-width: 42ch; }
.manifiesto-medio img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.manifiesto-medio .espacio-medio { aspect-ratio: 4 / 5; }

/* ==========================================================================
   9. Tipos de evento (WEB3E §6.3)
   ========================================================================== */

.categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.categoria { display: flex; flex-direction: column; }
.categoria-medio { position: relative; overflow: hidden; }
.categoria-medio img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .9s ease; }
.categoria:hover .categoria-medio img { transform: scale(1.03); }
.categoria-medio .espacio-medio { aspect-ratio: 3 / 4; }
.categoria h3 { margin: 18px 0 6px; font-size: clamp(21px, 2vw, 26px); }
.categoria p { color: var(--carbon-suave); font-size: 15px; margin-bottom: 14px; }
.categoria .text-link { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   10. Tarjetas: estilos, paquetes, historias, journal
   La tarjeta es la fotografía y su texto debajo. Sin marco ni sombra.
   ========================================================================== */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.cards--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.card > a { display: block; overflow: hidden; line-height: 0; }
.card > img, .card > a img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s ease; }
.card:hover > a img { transform: scale(1.03); }
.card .espacio-medio { aspect-ratio: 4 / 3; }
.card-body { padding: 18px 0 0; }
.card h3 { margin: 0 0 8px; font-size: clamp(21px, 2vw, 26px); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { opacity: .65; }
.card p { color: var(--carbon-suave); font-size: 15px; margin-bottom: 10px; }
.empty-card, .empty-inline {
    grid-column: 1 / -1;
    padding: 28px;
    border: 1px dashed var(--linea);
    border-radius: 0;
    background: transparent;
    color: var(--carbon-suave);
}
.meta {
    margin-bottom: 10px;
    color: var(--azul-humo);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Historia dominante: foto ancha con cápsula de lugar (referencia Easton) */
.historia-principal { position: relative; margin-bottom: clamp(20px, 2.4vw, 32px); overflow: hidden; }
.historia-principal img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.historia-principal .espacio-medio { aspect-ratio: 16 / 9; }
.historia-principal-texto { position: absolute; right: 0; bottom: 0; left: 0; padding: clamp(24px, 4vw, 48px); background: linear-gradient(transparent, rgba(20, 20, 20, .72)); color: #fff; }
.historia-principal-texto h3 { color: #fff; font-size: clamp(26px, 3.4vw, 44px); }
.capsula {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

/* Precio de paquete: dato tranquilo, nunca etiqueta de oferta */
.package-price { margin: 0 0 6px; font-family: var(--font-titulos); font-size: 22px; color: var(--carbon); }
.package-price-large { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.package-price-note { font-family: var(--font-texto); font-size: 15px; color: var(--carbon-suave); }
.customization-notice { max-width: 62ch; margin: 0 0 8px; padding: 16px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
/* WEB-6 §3: los tres paquetes en columnas comparables y la ficha de uno solo.
   Sin viñetas: cada inclusión es una línea separada por un filete, que es como
   se lee una carta, no una lista de Word. */
.paquetes-bloque { margin-top: clamp(56px, 7vw, 96px); }
.paquetes-comparados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: 36px; }
.paquete-columna { display: flex; flex-direction: column; padding-top: 24px; border-top: 2px solid var(--carbon); }
.paquete-columna h3 { margin: 4px 0 10px; font-size: clamp(26px, 2.6vw, 34px); }
.paquete-columna h3 a { text-decoration: none; }
.paquete-columna h3 a:hover { opacity: .65; }
.paquete-resumen { margin: 0; color: var(--carbon-suave); font-size: 15px; }
.paquete-columna > .button { margin-top: auto; padding-top: 32px; align-self: flex-start; }
.paquete-grupo { margin-top: 28px; }
.paquete-grupo-titulo { margin-bottom: 6px; color: var(--dorado); }
.paquete-items { margin: 0; padding: 0; list-style: none; }
.paquete-items li { padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 15px; color: var(--carbon-suave); }
.paquete-items li:first-child { border-top: 1px solid var(--linea); }
.paquete-heredado { margin: 18px 0 0; padding: 12px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.paquete-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); margin: 44px 0; }
.paquete-grupos .paquete-grupo { margin-top: 0; }
.paquete-grupos h2 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 26px); }
.button--linea { border-color: var(--linea); background: transparent; color: var(--carbon); }
.button--linea:hover { border-color: var(--azul-profundo); background: var(--azul-profundo); color: #fff; }

/* ==========================================================================
   11. Proceso, equipo, testimonio, instagram (WEB3E §6.7-6.11)
   ========================================================================== */

.proceso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: 20px; }
.proceso-paso { padding-top: 20px; border-top: 1px solid var(--linea); }
.proceso-numero { display: block; margin-bottom: 12px; color: var(--dorado); font-family: var(--font-titulos); font-size: 30px; line-height: 1; }
.proceso-paso h3 { font-size: 21px; margin-bottom: 8px; }
.proceso-paso p { color: var(--carbon-suave); font-size: 15px; margin: 0; }

.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.team-card { overflow: hidden; border-radius: 0; background: transparent; box-shadow: none; }
.team-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.team-card .espacio-medio { aspect-ratio: 4 / 5; }
.team-card > div { padding: 18px 0 0; }
.team-card h3 { margin: 6px 0; font-size: 24px; }

.testimonio { position: relative; padding: clamp(56px, 8vw, 104px) var(--margen); background: var(--arena-clara); text-align: center; }
.testimonio--foto { background: #1c1c1c center / cover; color: #fff; }
.testimonio--foto::before { position: absolute; inset: 0; background: rgba(20, 20, 20, .55); content: ""; }
.testimonio-inner { position: relative; z-index: 1; width: min(880px, 100%); margin: auto; }
.quote { font-family: var(--font-titulos); font-size: clamp(26px, 3.4vw, 46px); line-height: 1.25; margin: 18px 0 26px; }
.quote-author { color: inherit; }
.quote-meta { margin-top: 6px; color: var(--carbon-suave); font-size: 15px; }
.testimonio--foto .quote-meta { color: rgba(255, 255, 255, .8); }
.testimonio-controles { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.testimonio-controles button { width: 42px; height: 42px; border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: inherit; font-size: 16px; cursor: pointer; }
.testimonio-controles button:hover { border-color: currentColor; }

.instagram { text-align: center; }
.instagram h2 { margin-bottom: 16px; }

/* ==========================================================================
   12. Contacto y formulario (WEB3E §6.12)
   ========================================================================== */

.contact-section {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
.contact-heading { position: sticky; top: 110px; }
.contact-heading h2 { margin: 12px 0 20px; }
.contact-heading .section-intro { margin-bottom: 26px; }
.contact-datos { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.contact-datos a { text-decoration: none; border-bottom: 1px solid var(--linea); padding-bottom: 2px; width: max-content; }
.contact-form-wrap { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.meeting-form label { display: flex; flex-direction: column; gap: 8px; color: var(--carbon-suave); }
.meeting-form input, .meeting-form select, .meeting-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--linea);
    border-radius: 0;
    background: transparent;
    color: var(--carbon);
    font-family: var(--font-texto);
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
}
.meeting-form textarea { min-height: 110px; resize: vertical; }
.meeting-form input:focus, .meeting-form select:focus, .meeting-form textarea:focus {
    border-bottom-color: var(--azul-profundo);
    outline: 0;
}
.meeting-form .button { margin-top: 28px; }
.form-wide { grid-column: 1 / -1; }
.field-help, .form-explanation { color: var(--carbon-suave); font-family: var(--font-texto); font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.field-help { margin-top: -14px; }
.consent { flex-direction: row !important; align-items: flex-start; gap: 12px !important; font-weight: 400 !important; font-size: 15px !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1.55; }
.consent input { flex: 0 0 20px; width: 20px; min-height: 20px; margin-top: 2px; }
.form-notice { margin-bottom: 24px; padding: 14px 18px; border-left: 2px solid var(--azul-profundo); background: var(--arena-clara); color: var(--carbon); }
.form-notice--invalid, .form-notice--limited, .form-notice--unavailable { border-left-color: #9a4a34; }
.form-reference { margin: 0 0 22px; padding: 12px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-size: 15px; color: var(--carbon-suave); }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.field-phone { display: flex; flex-direction: column; gap: 8px; color: var(--carbon-suave); }
.field-phone-inputs { display: flex; gap: 10px; }
.field-phone-inputs input[name="phone_code"] { flex: 0 0 72px; text-align: center; }
.field-phone-inputs input[name="phone_number"] { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   13. Plantillas interiores (se refinan en los pasos 3-5; aquí quedan
   coherentes con la identidad, nunca con la paleta anterior)
   ========================================================================== */

.estilo-hero, .event-hero {
    position: relative;
    display: flex;
    align-items: end;
    min-height: 62vh;
    padding: clamp(40px, 6vw, 80px) var(--margen);
    background: #1c1c1c center / cover;
    color: #fff;
}
/* Mismo velo que el hero de portada: el titular va centrado, así que un
   degradado que solo oscurece el pie lo dejaba ilegible sobre una foto clara. */
.estilo-hero::before, .event-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 20, 20, .55), rgba(20, 20, 20, .28) 45%, rgba(20, 20, 20, .68));
    content: "";
}
.estilo-hero-inner, .event-hero-inner { position: relative; z-index: 1; width: min(var(--ancho), 100%); margin: auto; }
.estilo-hero .eyebrow, .event-hero .eyebrow { color: rgba(255, 255, 255, .82); }
.estilo-hero h1, .event-hero h1 { margin: 14px 0 0; }

.prose { font-size: 17px; line-height: 1.8; }
.prose > :first-child { margin-top: 0; }

/* Portafolio como historia: capítulos numerados (WEB-3E §7, docx §8).
   El texto se lee a 760px; la galería y el video usan todo el ancho de la sección. */
.capitulo { margin-bottom: clamp(56px, 7vw, 96px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--linea); }
.capitulo:first-child { border-top: 0; padding-top: 0; }
.capitulo-numero, .capitulo h2, .capitulo > .prose { max-width: 760px; }
.capitulo-numero { display: block; margin-bottom: 14px; color: var(--dorado); font-family: var(--font-titulos); font-size: 30px; line-height: 1; }
.capitulo h2 { margin-bottom: 18px; font-size: clamp(26px, 2.6vw, 34px); }
.capitulo > p.prose { max-width: 760px; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: 40px; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: 300px; border-radius: 0; object-fit: cover; }
.gallery figcaption { padding: 10px 2px; color: var(--carbon-suave); font-size: 13px; }
.video-wrap { margin: 36px 0; aspect-ratio: 16 / 9; }
.video-wrap iframe, .video-wrap video { width: 100%; height: 100%; border: 0; border-radius: 0; background: #161616; }
.credits { margin-top: 60px; padding-top: 34px; border-top: 1px solid var(--linea); }
.credit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.credit-list > div { display: flex; flex-direction: column; padding: 16px 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: transparent; }
.credit-list span { color: var(--azul-humo); }
.single-content { width: min(760px, 100%); margin: auto; }
.single-cover { overflow: hidden; margin-bottom: 36px; border-radius: 0; }
.single-cover img { display: block; width: 100%; height: auto; }
.pagina-section { margin-bottom: 44px; }
.pagina-section h2 { font-size: clamp(26px, 2.6vw, 34px); }

/* Filtros y etiquetas como cápsulas */
.filter-groups { display: flex; flex-wrap: wrap; gap: 18px 30px; margin-bottom: 44px; }
.filter-label { display: block; margin-bottom: 10px; color: var(--azul-humo); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.filter-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.filter-list a, .tag-list a {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: transparent;
    color: var(--carbon);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.filter-list a:hover, .tag-list a:hover { border-color: var(--carbon); }
.filter-list a.is-active { border-color: var(--azul-profundo); background: var(--azul-profundo); color: #fff; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }

/* Galería editorial de un Estilo: la primera foto a todo el ancho, el resto
   en pares (docx §9: "combinar fotografías verticales y horizontales"). */
.gallery-editorial figure:first-child { grid-column: 1 / -1; }
.gallery-editorial figure:first-child img { height: 60vh; min-height: 380px; max-height: 640px; }

/* Visor */
.visor-gallery figure { position: relative; }
.visor-gallery .credit { color: var(--carbon-suave); }
.visor-item { display: block; cursor: zoom-in; overflow: hidden; }
.visor-lightbox { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; background: rgba(18, 18, 18, .94); }
.visor-lightbox[hidden] { display: none; }
.visor-lightbox img { max-width: min(92vw, 1280px); max-height: 84vh; border-radius: 0; object-fit: contain; }
.visor-caption { position: absolute; bottom: 26px; left: 0; width: 100%; color: #ece7df; font-size: 15px; text-align: center; }
.visor-close, .visor-prev, .visor-next {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.visor-close:hover, .visor-prev:hover, .visor-next:hover { background: rgba(255, 255, 255, .14); }
.visor-close { top: 22px; right: 22px; }
.visor-prev { top: 50%; left: 22px; transform: translateY(-50%); }
.visor-next { top: 50%; right: 22px; transform: translateY(-50%); }
.visor-counter { position: absolute; top: 26px; left: 26px; color: #ece7df; font-size: 12px; letter-spacing: 0.14em; }

/* ==========================================================================
   14. Pie (WEB3E §5)
   ========================================================================== */

.site-footer { padding: clamp(56px, 7vw, 88px) var(--margen) 34px; background: var(--marfil); border-top: 1px solid var(--linea); color: var(--carbon); }
.footer-top { width: min(var(--ancho), 100%); margin: 0 auto 48px; text-align: center; }
.footer-lema { margin-top: 16px; color: var(--azul-humo); }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: min(var(--ancho), 100%); margin: auto; }
.footer-brand { display: block; margin-bottom: 10px; font-family: var(--font-titulos); font-weight: 500; font-size: clamp(21px, 2vw, 26px); }
.footer-tagline { margin: 0; }
.footer-heading { display: block; margin: 0 0 14px; color: var(--azul-humo); }
.footer-links { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer-links a { text-decoration: none; width: max-content; border-bottom: 1px solid transparent; }
.footer-links a:hover { border-color: currentColor; }
.footer-redes {
    width: min(var(--ancho), 100%);
    margin: clamp(48px, 6vw, 72px) auto 0;
    padding-top: 30px;
    border-top: 1px solid var(--linea);
    text-align: center;
}
.footer-redes-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 4vw, 56px); margin-top: 16px; }
.footer-redes-enlaces a { font-family: var(--font-titulos); font-size: clamp(22px, 2.4vw, 30px); text-decoration: none; }
.footer-redes-enlaces a:hover { color: var(--dorado); }
.footer-redes--vacio p { max-width: 46ch; margin: 12px auto 0; color: var(--carbon-suave); font-size: 15px; }
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    justify-content: space-between;
    width: min(var(--ancho), 100%);
    margin: 48px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--linea);
    color: var(--carbon-suave);
    font-size: 15px;
}

/* ==========================================================================
   15. Adaptación (WEB3E §3)
   ========================================================================== */

@media (max-width: 1100px) {
    .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proceso { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .site-nav { position: static; }
    .menu-boton { display: block; }
    .site-nav > ul {
        position: absolute;
        right: var(--margen);
        top: 100%;
        z-index: 120;
        display: none;
        flex-direction: column;
        align-items: flex-end;
        gap: 18px;
        min-width: 250px;
        padding: 26px 26px 30px;
        background: var(--marfil);
        border: 1px solid var(--linea);
        color: var(--carbon);
    }
    .menu-interruptor:checked + .site-nav > ul { display: flex; }
    .site-nav > ul a { font-family: var(--font-titulos); font-size: 21px; letter-spacing: 0.02em; text-transform: none; }
    .header-cta { display: none; }
    .cards, .cards--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manifiesto, .contact-section, .content-grid { grid-template-columns: 1fr; }
    .manifiesto-medio { max-width: 460px; }
    .contact-heading { position: static; }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery img { height: 240px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paquetes-comparados, .paquete-grupos { grid-template-columns: 1fr; }
    .paquete-columna > .button { align-self: stretch; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .site-logo svg { height: 44px; }
    .hero-portada { padding: 120px var(--margen) 80px; }
    .cards, .cards--dos, .categorias, .team-grid, .gallery, .credit-list, .footer-grid, .form-grid, .proceso { grid-template-columns: 1fr; }
    .gallery img { height: auto; aspect-ratio: 4 / 3; }
    .estilo-hero, .event-hero { min-height: 48vh; }
    .button { width: 100%; }
    .footer-top { text-align: left; }
    .footer-legal { flex-direction: column; }
    .visor-prev, .visor-next, .visor-close { width: 42px; height: 42px; }
    .visor-prev { left: 10px; }
    .visor-next { right: 10px; }
    .visor-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .revela, .revela.es-visible { opacity: 1; transform: none; transition: none; }
    .card > a img, .categoria-medio img { transition: none; }
    .card:hover > a img, .categoria:hover .categoria-medio img { transform: none; }
    .site-header.esta-fija { animation: none; }
    .hero-bajar { animation: none; }
}

/* ==========================================================================
   16. Actualización de octubre de 2026
   Franja «Un solo equipo», Arte floral, mosaico, WhatsApp flotante, banda de
   la página Bodas y artículos del Journal. Mismas cuatro voces tipográficas.
   ========================================================================== */

/* Un solo equipo (B1) */
.solo-equipo { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.solo-equipo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.solo-equipo-grid > div { padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 36px); }
.solo-equipo-grid > div + div { border-left: 1px solid var(--linea); }
.solo-equipo-grid h3 { margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.solo-equipo-grid p { margin: 0; color: var(--carbon-suave); font-size: 15px; line-height: 1.7; }
.solo-equipo-cierre { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; }

/* Arte floral (B2) */
.arte-tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.arte-tira li { margin: 0; }
.arte-tira a { display: block; color: inherit; text-decoration: none; }
.arte-tira img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--arena); transition: transform .6s ease; }
.arte-tira a:hover img { transform: scale(1.03); }
.arte-tira span { display: block; margin-top: 10px; color: var(--carbon-suave); font-size: 14px; }

/* Mosaico «Momentos» / Instagram (B3) */
.momentos .section-head { margin-bottom: 28px; }
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); margin: 0; padding: 0; list-style: none; }
.mosaico li { margin: 0; }
.mosaico a { display: block; overflow: hidden; }
.mosaico img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--arena); transition: transform .6s ease; }
.mosaico a:hover img { transform: scale(1.04); }
.momentos .section-pie { text-align: center; }

/* WhatsApp flotante (B4) */
.wa-flotante {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px;
    border-radius: 999px; background: var(--azul-profundo); color: #fff; text-decoration: none;
    font: 600 12px/1 var(--font-texto); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(35, 35, 35, .22); transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.wa-flotante:hover { background: var(--carbon); }
.wa-flotante:focus-visible { outline: 2px solid var(--azul-profundo); outline-offset: 3px; }
.wa-flotante svg { flex: 0 0 auto; }
.wa-flotante--oculto { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* Banda de la página Bodas (B5) */
.pagina-banda { margin: clamp(32px, 4vw, 56px) 0; }
.pagina-banda img { display: block; width: 100%; height: clamp(220px, 38vw, 480px); object-fit: cover; }
.pagina-banda figcaption { padding: 8px 2px 0; color: var(--carbon-suave); font-size: 13px; }

/* Artículos del Journal (C) */
.prose--articulo h2 { margin: 1.8em 0 .5em; font-size: clamp(26px, 3vw, 34px); }
.prose--articulo p { margin: 0 0 1.1em; }
.journal-foto { margin: 2em 0; }
.journal-foto img { display: block; width: 100%; height: auto; }
.journal-foto figcaption { padding: 8px 2px 0; color: var(--carbon-suave); font-size: 13px; }
.journal-cierre { margin: 2.4em 0 0; }

@media (max-width: 900px) {
    .solo-equipo-grid { grid-template-columns: 1fr; }
    .solo-equipo-grid > div + div { border-left: 0; border-top: 1px solid var(--linea); }
    .arte-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .wa-flotante { right: 14px; bottom: 14px; width: 54px; height: 54px; min-height: 0; padding: 0; justify-content: center; }
    .wa-flotante-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journal-cierre .button { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .arte-tira img, .mosaico img, .wa-flotante { transition: none; }
    .arte-tira a:hover img, .mosaico a:hover img { transform: none; }
}