/* =========================================================
   BASE — reset, tipografía, header, botones, bloques compartidos
   (proyectos, contacto, footer, modo borrador)
   ========================================================= */
*, *::before, *::after{ margin: 0; padding: 0; box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body{
    font-family: var(--f-texto);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--c-texto);
    background: var(--c-fondo);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
img, video{ display: block; max-width: 100%; }
a{ color: inherit; }
h1, h2, h3{ font-family: var(--f-titulos); font-weight: 600; line-height: 1.05; }
h2{ font-size: var(--t-2xl); }
h3{ font-size: var(--t-xl); }
:focus-visible{ outline: 2px solid var(--c-marca-hover); outline-offset: 3px; }

[hidden]{ display: none !important; }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor{ width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--gutter); }
.seccion{ padding-block: var(--sec-y); }
.eyebrow{
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--c-marca); display: block; margin-bottom: .8rem;
}
.titulo-seccion{ margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); max-width: 22ch; }
.lead{ font-size: var(--t-lg); font-weight: 300; max-width: 60ch; }

/* ---------- Botones (de 08 Web: .boton1 / .boton2) ---------- */
.boton1, .boton2, .boton-linea{
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 1rem 1.5rem; border-radius: var(--radio); border: 0;
    font: 700 var(--t-sm)/1 var(--f-texto); letter-spacing: .02em;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--dur), color var(--dur), transform var(--dur) var(--ease);
}
.boton1{ background: var(--c-marca); color: var(--c-texto-claro); }
.boton1:hover{ background: var(--c-marca-hover); color: var(--c-oscuro); }
.boton2{ background: var(--c-profundo); color: var(--c-texto-claro); }
.boton2:hover{ background: var(--c-acento); color: var(--c-oscuro); }
.boton-linea{ background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.boton-linea:hover{ background: var(--c-texto-claro); color: var(--c-oscuro); box-shadow: none; }
.boton1:active, .boton2:active, .boton-linea:active{ transform: scale(.97); }
.botones{ display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header / navegación ---------- */
.site-header{
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
    height: var(--header-h);
    background: var(--c-hero);
    color: var(--c-texto-claro);
    transition: background-color var(--dur), box-shadow var(--dur);
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
[data-hero="crema"] .site-header{ color: var(--c-oscuro); }
.site-header .contenedor{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca{ display: flex; align-items: center; height: 100%; }
.marca img{ height: 44px; width: auto; }
[data-hero="crema"] .marca img{ filter: brightness(.3) sepia(1) hue-rotate(-20deg) saturate(3); }
.nav{ display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); }
.nav a{ text-decoration: none; font-size: var(--t-sm); letter-spacing: .04em; transition: color var(--dur); }
.nav a:not(.boton1):hover{ color: var(--c-nav-hover); }
.nav .boton1{ padding: .5rem 1rem; }
.site-header .nav .boton1{ background: var(--c-texto-claro); color: var(--c-oscuro); }
.site-header .nav .boton1:hover{ background: var(--c-oscuro); color: var(--c-texto-claro); }
.menu-toggle{ display: none; background: none; border: 0; color: inherit; cursor: pointer; width: 44px; height: 44px; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
    display: block; width: 24px; height: 2px; background: currentColor; margin: auto; position: relative;
    transition: transform var(--dur) var(--ease), background-color var(--dur);
}
.menu-toggle span::before, .menu-toggle span::after{ content: ""; position: absolute; left: 0; }
.menu-toggle span::before{ top: -7px; } .menu-toggle span::after{ top: 7px; }
.menu-abierto .menu-toggle span{ background: transparent; }
.menu-abierto .menu-toggle span::before{ transform: translateY(7px) rotate(45deg); }
.menu-abierto .menu-toggle span::after{ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
    .menu-toggle{ display: block; }
    .nav{
        position: fixed; inset: var(--header-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--c-hero); padding: 1rem var(--gutter) 2rem;
        box-shadow: 0 16px 24px rgb(0 0 0 / .2);
        transform: translateY(-110%); visibility: hidden;
        transition: transform var(--dur) var(--ease), visibility var(--dur);
    }
    .nav a{ font-size: var(--t-lg); padding: 1rem 0; border-bottom: 1px solid rgb(255 255 255 / .15); }
    .nav .boton1{ margin-top: 1rem; border: 0; padding: 1rem; }
    .menu-abierto .nav{ transform: none; visibility: visible; }
}

/* ---------- Proyectos (grid compartido home + landings) ---------- */
.filtros{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--gap); }
.filtros button{
    font: 700 var(--t-xs)/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase;
    padding: .5rem 1rem; border-radius: 99px; cursor: pointer;
    background: transparent; color: inherit; border: 1.5px solid currentColor; opacity: .7;
    transition: all var(--dur);
}
.filtros button:hover{ opacity: 1; }
.filtros button[aria-pressed="true"]{ background: var(--c-marca); border-color: var(--c-marca); color: var(--c-texto-claro); opacity: 1; }
.galeria{
    display: grid; gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
/* tarjeta: patrón .cuadros de 08 Web */
.cuadro{ position: relative; display: block; overflow: hidden; border-radius: var(--radio-lg); aspect-ratio: 640 / 500; background: rgb(0 0 0 / .15); text-decoration: none; }
.cuadro img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cuadro::before{
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: rgb(63 32 33 / .55); opacity: 0; transition: opacity .3s ease;
}
.cuadro .txt{
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--crema); text-align: center; padding: 1rem;
    opacity: 0; transform: translateY(10px); transition: all .6s var(--ease);
}
.cuadro .txt h3{ font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.cuadro .txt small{ font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; opacity: .8; margin-top: .4rem; }
.cuadro:hover::before, .cuadro:focus-visible::before{ opacity: 1; }
.cuadro:hover .txt, .cuadro:focus-visible .txt{ opacity: 1; transform: none; }
.cuadro:hover img{ transform: scale(1.04); }
@media (hover: none){  /* en celular no hay hover: nombre siempre visible abajo */
    .cuadro::before{ opacity: 1; background: linear-gradient(transparent 45%, rgb(63 32 33 / .85)); }
    .cuadro .txt{ opacity: 1; transform: none; justify-content: flex-end; align-items: flex-start; text-align: left; }
}
@media (max-width: 600px){  /* celular: dos columnas */
    .galeria{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .cuadro{ border-radius: var(--radio); }
    .cuadro .txt{ padding: .5rem .5rem; }
    .cuadro .txt h3{ font-size: .95rem; letter-spacing: .02em; line-height: 1.1; }
    .cuadro .txt small{ font-size: .6rem; margin-top: .2rem; }
}
.galeria-pie{ display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: calc(var(--gap) * 1.5); }
.cuadro[hidden]{ display: none; }

/* ---------- Contacto (rediseñado, compartido) ---------- */
.contacto{ background: var(--c-oscuro); color: var(--c-texto-claro); }
.contacto-grid{ display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 900px){ .contacto-grid{ grid-template-columns: 5fr 7fr; align-items: start; } }
.contacto h2{ margin-bottom: 1rem; }
.contacto .lead{ margin-bottom: 2rem; opacity: .9; }
.datos{ list-style: none; display: grid; gap: .9rem; margin-bottom: 2rem; }
.datos a{ text-decoration: none; display: inline-flex; align-items: center; gap: .8rem; transition: color var(--dur); }
.datos a:hover{ color: var(--c-marca-hover); }
.datos svg{ width: 22px; height: 22px; flex: none; }
.form{
    display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr;
    background: rgb(239 224 205 / .06); border: 1px solid rgb(239 224 205 / .15);
    padding: clamp(1rem, 1rem + 2vw, 2.5rem); padding: round(clamp(1rem, 1rem + 2vw, 2.5rem), .5rem); border-radius: var(--radio-lg);
}
.campo{ display: grid; gap: .4rem; grid-column: 1 / -1; }
.campo.mitad{ grid-column: span 1; }
@media (max-width: 600px){ .campo.mitad{ grid-column: 1 / -1; } }
.campo label{ font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.campo input, .campo select, .campo textarea{
    width: 100%; font: 400 var(--t-base)/1.4 var(--f-texto); color: var(--c-oscuro);
    background: var(--crema); border: 2px solid transparent; border-radius: var(--radio);
    padding: 1rem 1rem; transition: border-color var(--dur), box-shadow var(--dur);
}
.campo textarea{ resize: vertical; min-height: 8rem; }
.campo select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cafe) 50%), linear-gradient(135deg, var(--cafe) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline: none; border-color: var(--c-marca); box-shadow: 0 0 0 4px rgb(216 96 24 / .25); }
.campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid{ border-color: #E5484D; }
.form .boton1{ grid-column: 1 / -1; padding: 1rem; font-size: var(--t-base); }
@media (min-width: 601px){ .form .boton1{ justify-self: start; padding-inline: 2.5rem; } }
.campo .ayuda{ font-size: var(--t-xs); opacity: .7; }
.form-nota{ grid-column: 1 / -1; font-size: var(--t-sm); min-height: 1.5em; }
.form-nota.ok{ color: var(--c-acento); }
.form-nota.aviso{ color: var(--c-marca-hover); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--c-oscuro); color: var(--c-texto-claro); border-top: 1px solid rgb(239 224 205 / .12); padding-block: 2.5rem; font-size: var(--t-sm); }
.site-footer .contenedor{ display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.site-footer img{ height: 34px; width: auto; }
.site-footer nav{ display: flex; flex-wrap: wrap; gap: 1.2rem; }
.site-footer a{ text-decoration: none; opacity: .8; }
.site-footer a:hover{ opacity: 1; color: var(--c-marca-hover); }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{
    position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    background: #25D366; color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
    transition: transform var(--dur) var(--ease);
}
.wa-flotante:hover{ transform: scale(1.08); }
.wa-flotante svg{ width: 30px; height: 30px; }

/* ---------- Aparición al hacer scroll ---------- */
.revelar{ opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.revelar.visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .revelar{ opacity: 1; transform: none; }
}

/* =========================================================
   MODO BORRADOR (?borrador en la URL)
   Resalta los textos provisionales y muestra qué irá ahí.
   ========================================================= */
.modo-borrador .todo{
    background: rgb(255 214 0 / .28); outline: 1.5px dashed #E0A800; outline-offset: 2px; border-radius: 3px;
    position: relative; cursor: help;
}
.modo-borrador .todo:hover::after{
    content: "✎ " attr(data-todo);
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 90;
    width: max-content; max-width: min(340px, 80vw);
    font: 600 12px/1.4 var(--f-texto); letter-spacing: 0; text-transform: none; text-align: left;
    color: #1a1a1a; background: #FFE066; padding: .5rem .5rem; border-radius: 6px;
    box-shadow: 0 6px 16px rgb(0 0 0 / .25); white-space: normal;
}
.modo-borrador .todo-bloque{ outline: 2px dashed #E0A800; outline-offset: -8px; }
.panel-borrador{
    position: fixed; left: 1rem; bottom: 1rem; z-index: 95;
    background: #1d1d1f; color: #f5f5f7; font: 13px/1.4 var(--f-texto);
    border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / .35);
    width: min(280px, calc(100vw - 2rem)); overflow: hidden;
}
.panel-borrador summary{ padding: .5rem 1rem; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.panel-borrador summary::-webkit-details-marker{ display: none; }
.panel-borrador .cuerpo{ padding: 0 1rem 1rem; display: grid; gap: .7rem; }
.panel-borrador label{ display: grid; gap: .25rem; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.panel-borrador select{ font: 13px var(--f-texto); padding: .5rem; border-radius: 6px; border: 0; }
.panel-borrador button{ font: 700 12px var(--f-texto); padding: .5rem; border-radius: 6px; border: 0; cursor: pointer; }
.panel-borrador .cuenta{ color: #FFE066; }

/* ---------- Páginas legales (privacidad.html) ---------- */
.legal-texto{ max-width: 46rem; padding-block: calc(var(--header-h) + 3rem) 4rem; line-height: 1.7; }
.legal-texto h1{ font-size: var(--t-xl); margin-block: .4rem .2rem; }
.legal-texto h2{ font-size: var(--t-lg); margin-block: 2.2rem .6rem; }
.legal-texto p, .legal-texto ul{ margin-block: 0 1rem; }
.legal-texto ul{ padding-left: 1rem; }
.legal-texto li{ margin-bottom: .35rem; }
.legal-texto a{ color: var(--c-marca); }
.legal-fecha{ font-size: var(--t-sm); opacity: .7; }
.form-legal{ grid-column: 1 / -1; font-size: var(--t-xs); opacity: .75; margin: 0; }
.form-legal a{ color: inherit; }