/* ==========================================================================
   Gianni Bulacio · hoja de estilos del sitio público

   Estructura:
     1. Variables y reset
     2. Tipografía base
     3. Barra superior (solo móvil/tablet)
     4. Navegación lateral
     5. Contenedor principal
     6. Componentes (rejillas, tarjetas, botones, formularios)
     7. Plantillas de página
     8. Visor a pantalla completa
     9. Pie
    10. Responsive
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
    --bg: #ffffff;
    --fg: #111111;
    --fg-soft: #6b6b6b;
    --fg-faint: #a8a8a8;
    --line: #e6e6e6;
    --line-strong: #111111;
    --accent: #111111;
    --overlay: rgba(255, 255, 255, .97);

    --nav-width: 300px;
    --gutter: 2rem;
    --maxw: 1080px;

    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Barlow Semi Condensed', 'Montserrat', sans-serif;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Foco visible solo por teclado */
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--fg); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* 2. Tipografía ----------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 1rem;
    letter-spacing: .02em;
}

h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); text-transform: uppercase; letter-spacing: .06em; }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1.4em; }

.prose { max-width: 68ch; }
.prose p { color: #222; }
.prose a { border-bottom: 1px solid var(--line-strong); }
.prose img { margin: 2rem 0; }
.prose blockquote {
    margin: 2rem 0; padding-left: 1.25rem;
    border-left: 2px solid var(--line-strong); color: var(--fg-soft); font-style: italic;
}

.eyebrow {
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--fg-faint); margin: 0 0 .6rem; font-weight: 500;
}

.lead { font-size: 1.05rem; color: #333; }

/* 3. Barra superior (visible bajo 1024px) --------------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1rem;
    background: var(--overlay);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(180%) blur(8px);
}

.topbar__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px; margin-left: -8px;
}
.topbar__burger span {
    display: block; height: 1.5px; background: var(--fg);
    transition: transform .3s var(--ease), opacity .2s;
}
.topbar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.topbar__brand {
    display: flex; align-items: center;
    margin-right: auto;
}
.topbar__brand img { height: 20px; width: auto; display: block; }

.topbar__actions { display: flex; align-items: center; gap: 1rem; }
.topbar__search { display: inline-flex; padding: .35rem; color: var(--fg); }

.langswitch { display: flex; gap: .5rem; font-size: .78rem; letter-spacing: .12em; }
.langswitch__item { color: var(--fg-faint); padding: .2rem 0; }
.langswitch__item.is-active { color: var(--fg); border-bottom: 1px solid var(--fg); }

/* 4. Navegación lateral --------------------------------------------------- */
.sitenav-overlay {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0, 0, 0, .35);
    opacity: 0; transition: opacity .3s var(--ease);
}
.sitenav-overlay.is-visible { opacity: 1; }

.sitenav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(86vw, var(--nav-width));
    background: var(--bg);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
}
.sitenav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s var(--ease), visibility 0s;
}

.sitenav__inner { padding: 2rem 1.75rem 3rem; }

.sitenav__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 2.25rem;
}

.sitenav__brand { display: block; }
.sitenav__brand img { display: block; height: 28px; width: auto; max-width: 100%; }

.sitenav__close { font-size: 1.75rem; line-height: 1; padding: 0 .25rem; }

.sitenav__list { list-style: none; margin: 0; padding: 0; }

.sitenav__item {
    position: relative;
    border-bottom: 1px solid var(--line);
}

.sitenav__link {
    display: block;
    padding: .8rem 2rem .8rem 0;
    font-size: .98rem;
    font-weight: 400;
    color: var(--fg);
    transition: opacity .2s;
}
.sitenav__link:hover { opacity: .55; }

.sitenav__item.is-disabled > .sitenav__link {
    color: var(--fg-faint);
    cursor: default;
}
.sitenav__item.is-disabled > .sitenav__link:hover { opacity: 1; }

.sitenav__item.is-current > .sitenav__link { font-weight: 500; }
.sitenav__item.is-current > .sitenav__link::after {
    content: ''; display: block; width: 22px; height: 1px;
    background: var(--fg); margin-top: .35rem;
}

.sitenav__toggle {
    /* Se ancla a la PRIMERA FILA del elemento, no a su alto total: el
       contenedor `.sitenav__item` crece al desplegar el submenú, y
       centrarlo al 50% dejaría el chevron flotando entre los hijos.
       El alto replica el de `.sitenav__link` (padding + línea de texto),
       de modo que el área táctil supera los 44x44 recomendados. */
    position: absolute; top: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
    width: 44px;
    height: calc(1.6rem + (.98rem * 1.7));
    color: var(--fg-soft);
}
.sitenav__toggle svg { transition: transform .3s var(--ease); }
.sitenav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Despliegue animado de los submenús.
   El truco de grid (0fr → 1fr) anima la altura sin necesidad de medirla
   en JavaScript ni de usar max-height con un valor mágico. El atributo
   `hidden` del HTML solo evita el destello antes de que cargue el JS:
   el script lo retira al iniciar y a partir de ahí manda esta clase. */
.sitenav__submenu {
    display: grid;
    grid-template-rows: 0fr;
    padding-left: 1.1rem;
    transition: grid-template-rows .35s var(--ease);
}
.sitenav__submenu > .sitenav__list {
    overflow: hidden;
    min-height: 0;
    /* El contenido se desvanece un poco después de que empieza a abrirse,
       y desaparece rápido al cerrar: el efecto queda más suave. */
    opacity: 0;
    transition: opacity .25s ease .05s;
}
.sitenav__submenu.is-open { grid-template-rows: 1fr; }
.sitenav__submenu.is-open > .sitenav__list { opacity: 1; }

.sitenav__submenu .sitenav__item:last-child { border-bottom: 0; }
.sitenav__submenu .sitenav__link { font-size: .92rem; padding: .7rem 2rem .7rem 0; color: #333; }

/* Iconos de redes sociales: compartidos por el menú lateral y el pie.
   `.sitenav__social` y `.footer__social` fijan solo el espaciado propio de
   cada ubicación; el resto (tamaño, color, hover) es común y vive en
   `.social-icons`, la clase que usa views/partials/social-icons.php. */
.social-icons {
    display: flex; flex-wrap: wrap; gap: .85rem;
    list-style: none; margin: 0; padding: 0;
}
.social-icons a {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; /* icono de 15px con margen de toque alrededor */
    color: var(--fg-soft);
    transition: color .2s;
}
.social-icons a:hover { color: var(--fg); }

.sitenav__social { margin: 1.5rem -0.5rem 0; }
.footer__social { margin: -0.5rem; }

/* Selector de idioma de la barra lateral: visible en todos los anchos,
   a diferencia del conmutador ES/EN de la barra superior (.langswitch),
   que solo existe bajo 1024px. */
.sitenav__lang {
    /* Sin borde propio: el último ítem del menú ya termina en una línea
       (.sitenav__item), y agregar otra aquí arriba —con el hueco del
       margen en el medio— se leía como una raya doble por error. Solo
       espaciado, igual que .sitenav__social un poco más abajo. */
    display: flex; gap: 1.25rem;
    list-style: none; margin: 2rem 0 0; padding: 0;
}
.sitenav__lang-link {
    font-size: .82rem; color: var(--fg-faint);
    transition: color .2s;
}
.sitenav__lang-link:hover { color: var(--fg); }
.sitenav__lang-link.is-current {
    color: var(--fg); font-weight: 500;
}
.sitenav__lang-link.is-current::after {
    content: ''; display: block; width: 16px; height: 1px;
    background: var(--fg); margin-top: .3rem;
}

/* 5. Contenedor principal ------------------------------------------------- */
.main { min-height: 60vh; }

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 3rem var(--gutter) 4rem;
}
.wrap--wide { max-width: 1440px; }
.wrap--narrow { max-width: 760px; }
.wrap--flush { padding-left: 0; padding-right: 0; }

.page-head { margin-bottom: 2.5rem; }
.page-head--center { text-align: center; }
.page-head__title { margin-bottom: .5rem; }
.page-head__sub { color: var(--fg-soft); font-size: .95rem; }

.breadcrumbs {
    display: flex; flex-wrap: wrap; gap: .5rem;
    list-style: none; margin: 0 0 1.25rem; padding: 0;
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--fg-faint);
}
.breadcrumbs li + li::before { content: '/'; margin-right: .5rem; }
.breadcrumbs a:hover { color: var(--fg); }

.empty {
    padding: 4rem 0; text-align: center; color: var(--fg-soft);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* 6. Componentes ---------------------------------------------------------- */

/* Botones */
.btn {
    display: inline-block;
    padding: .9rem 2.25rem;
    border: 1px solid var(--fg);
    font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.btn:hover { background: var(--fg); color: #fff; }
.btn--solid { background: var(--fg); color: #fff; }
.btn--solid:hover { background: transparent; color: var(--fg); }
.btn--block { display: block; width: 100%; text-align: center; }

/* Rejilla de tarjetas */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2.5rem 2rem;
    list-style: none; margin: 0; padding: 0;
}

.card__media {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f2f2f2;
    aspect-ratio: 3 / 2;
}
.card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s var(--ease), opacity .4s;
}
.card:hover .card__media img { transform: scale(1.04); }

.card__media--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-faint); font-size: .8rem; letter-spacing: .1em;
}

.card__body { padding-top: .9rem; }
.card__title { font-size: 1rem; margin: 0 0 .3rem; letter-spacing: .04em; }
.card__meta { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.card__excerpt { font-size: .9rem; color: var(--fg-soft); margin: .5rem 0 0; }

/* Rejilla de fotos */
.photogrid { display: grid; gap: 1.25rem; }
.photogrid--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.photogrid--masonry { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.photogrid--fullscreen { grid-template-columns: 1fr; gap: 2rem; max-width: 1200px; margin: 0 auto; }

.photogrid__item { margin: 0; }
.photogrid__button { display: block; width: 100%; padding: 0; background: #f2f2f2; }
.photogrid__button img { width: 100%; height: auto; transition: opacity .3s; }
.photogrid__button:hover img { opacity: .88; }
.photogrid--grid .photogrid__button { aspect-ratio: 3 / 2; }
.photogrid--grid .photogrid__button img { height: 100%; object-fit: cover; }

.photogrid__caption {
    margin-top: .5rem; font-size: .8rem; color: var(--fg-soft);
}

/* Formularios */
.field { margin-bottom: 1.5rem; }
.field__label {
    display: block; margin-bottom: .45rem;
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-soft);
}
.field__input,
.field__textarea,
.field__select {
    display: block;
    width: 100%;
    padding: .8rem .9rem;
    /* Mínimo 16px: por debajo de eso Safari/iOS hace zoom automático
       al enfocar el campo. */
    font: inherit; font-size: 1rem;
    color: var(--fg);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    transition: border-color .2s;
}
.field__input:focus,
.field__textarea:focus,
.field__select:focus { border-color: var(--fg); outline: none; }
.field__textarea { min-height: 170px; resize: vertical; }
.field__error { display: block; margin-top: .4rem; font-size: .82rem; color: #b3261e; }
.field.has-error .field__input,
.field.has-error .field__textarea { border-color: #b3261e; }
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mensajes flash */
.flashes { max-width: var(--maxw); margin: 1rem auto 0; padding: 0 var(--gutter); }
.flash {
    margin: 0 0 .75rem; padding: .85rem 1.1rem;
    font-size: .9rem; border-left: 3px solid var(--fg);
    background: #f6f6f6;
}
.flash--success { border-color: #1e7b3c; }
.flash--error { border-color: #b3261e; }

/* Paginación */
.pagination {
    display: flex; justify-content: center; gap: .5rem;
    list-style: none; margin: 3rem 0 0; padding: 0;
}
.pagination a, .pagination span {
    display: block; min-width: 38px; padding: .5rem .6rem;
    text-align: center; font-size: .85rem; border: 1px solid var(--line);
}
.pagination .is-current { border-color: var(--fg); font-weight: 500; }

/* 7. Plantillas ----------------------------------------------------------- */

/* Portada: carrusel a pantalla completa */
.hero {
    position: relative;
    height: calc(100vh - 57px);
    min-height: 420px;
    background: #0b0b0b;
    overflow: hidden;
}
/* Fundido encadenado sin parpadeo.
   Si ambas diapositivas se animaran a la vez —una bajando y otra subiendo—
   a mitad del cruce las dos quedarían translúcidas y asomaría el fondo
   negro del contenedor. En su lugar, la entrante aparece POR ENCIMA
   (z-index mayor) y la saliente conserva su opacidad hasta que el fundido
   ha terminado, momento en el que desaparece de golpe ya tapada. */
.hero__slide {
    position: absolute; inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 0s linear 1.2s;
}
.hero__slide.is-active {
    opacity: 1;
    z-index: 2;
    transition: opacity 1.2s var(--ease);
}
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero__caption {
    /* z-index 3: las diapositivas usan 1 y 2 para encadenar el fundido,
       así que los controles y el pie deben ir por encima de ambas. */
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    /* Espacio inferior ampliado: deja hueco libre para los puntos del
       carrusel y evita que se superpongan al título en móvil. */
    padding: 4.5rem 2rem 2.75rem;
    /* Degradado alto y denso: muchas de estas fotografías tienen fondo
       claro (retratos de estudio), y con un velo suave el texto blanco
       se volvía ilegible. La sombra del texto cubre el caso extremo. */
    background: linear-gradient(to top,
        rgba(0, 0, 0, .78) 0%,
        rgba(0, 0, 0, .45) 45%,
        transparent 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.hero__caption a { display: inline-block; }
.hero__title { font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.hero__hint { font-size: .74rem; letter-spacing: .16em; opacity: .85; margin: .35rem 0 0; }

.hero__dots {
    position: absolute; bottom: 1.25rem; right: 1.5rem; z-index: 3;
    display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0;
    /* Sin esto el <li> hereda la caja de línea del texto (~27px) y su
       zona táctil invisible se solapa con el título aunque el punto
       visible (8px) no lo toque. */
    line-height: 0;
}
.hero__dot {
    /* Son <button> dentro de un contenedor flex: sin este reset, el
       relleno por defecto del navegador (~1px 6px) fija un ancho mínimo
       mayor que los 8px declarados —min-width:auto de flexbox no deja
       que un ítem encoja por debajo de su contenido— y el punto se ve
       ovalado (12×8) en vez de redondo. */
    padding: 0; min-width: 0; flex: none;
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transition: background .3s, transform .3s;
}
.hero__dot.is-active { background: #fff; transform: scale(1.3); }

.hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 56px; height: 56px; color: #fff; font-size: 2rem; line-height: 1;
    opacity: .7; transition: opacity .2s;
}
.hero__arrow:hover { opacity: 1; }
.hero__arrow--prev { left: .5rem; }
.hero__arrow--next { right: .5rem; }

.hero--empty {
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: #111;
}

/* Intro de proyecto */
.project-intro { text-align: center; padding-top: 3.5rem; }
.project-intro .prose { margin: 0 auto; text-align: left; }
.project-intro__actions { margin-top: 2.5rem; }

/* Video incrustado */
.embed {
    position: relative; width: 100%; padding-top: 56.25%;
    background: #000; margin-bottom: 2.5rem;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Bio: retrato debajo de la intro, antes de la trayectoria — una sola
   columna de lectura, no una foto encajonada al costado del texto. */
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose h2 { margin-top: 2.75em; }
.prose h2:first-child { margin-top: 0; }

.bio__intro { margin-bottom: 2.75rem; }
.bio__portrait { margin: 0 0 2.75rem; }
.bio__portrait img { width: 100%; max-width: 480px; }
.bio__contact { margin-top: 2.75rem; }

/* Contacto */
.contact { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.contact__info { font-size: .95rem; color: var(--fg-soft); }
.contact__info dt {
    font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fg-faint); margin-top: 1.25rem;
}
.contact__info dd { margin: .2rem 0 0; color: var(--fg); }

/* Tienda */
.product__price {
    font-size: 1.25rem; letter-spacing: .04em; margin: 1rem 0 1.5rem;
}
.product__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

/* Buscador */
.searchbar { display: flex; gap: .75rem; margin-bottom: 2.5rem; }
.searchbar .field__input { flex: 1; }

.results { list-style: none; margin: 0; padding: 0; }
.results__item {
    display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem;
    padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.results__thumb { background: #f2f2f2; aspect-ratio: 1; }
.results__thumb img { width: 100%; height: 100%; object-fit: cover; }
.results__type {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint);
}

/* Error */
.errorpage { text-align: center; padding: 6rem var(--gutter); }
.errorpage__code { font-size: 4rem; font-weight: 300; color: var(--fg-faint); margin: 0; }

/* 8. Visor a pantalla completa -------------------------------------------- */
.lightbox {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    /* Color sólido (sin canal alfa): combinar un fondo rgba() con la
       transición de "opacity" del propio elemento provoca que algunos
       motores de render (Safari/WebKit móvil incluido) compongan mal
       ambas capas de transparencia y dejen ver la página de fondo. */
    background: #0a0a0a;
    opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__figure { margin: 0; max-width: 92vw; max-height: 86vh; text-align: center; }
.lightbox__image { max-width: 92vw; max-height: 78vh; width: auto; height: auto; margin: 0 auto; }
.lightbox__caption { margin-top: 1rem; color: #ddd; font-size: .85rem; }

/* Los controles se superponen a la fotografía, así que llevan un halo
   oscuro propio: sin él, una flecha blanca sobre un cielo claro —muy
   frecuente en estas galerías— resulta invisible. */
.lightbox__close,
.lightbox__nav {
    display: grid; place-items: center;
    color: #fff; line-height: 1; opacity: .75;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    transition: opacity .2s, background .2s;
}

.lightbox__close {
    position: absolute; top: 1rem; right: 1.25rem;
    width: 44px; height: 44px; font-size: 1.9rem;
    padding-bottom: .18em; /* centra ópticamente el aspa */
}

.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; font-size: 2.4rem;
    padding-bottom: .1em;
}

.lightbox__nav:hover, .lightbox__close:hover {
    opacity: 1; background: rgba(0, 0, 0, .7);
}
.lightbox__nav--prev { left: .5rem; }
.lightbox__nav--next { right: .5rem; }

.lightbox__counter {
    position: absolute; bottom: 1.25rem; left: 0; right: 0;
    text-align: center; color: #999; font-size: .75rem; letter-spacing: .16em;
}

/* Pantalla de carga entre secciones ---------------------------------------
   Se muestra al hacer clic en un enlace interno y desaparece cuando carga
   la página siguiente. El logo respira suavemente y una estrella fugaz
   cruza el fondo cada pocos segundos. */
.preloader {
    position: fixed; inset: 0; z-index: 160;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    overflow: hidden;
    opacity: 0;
    transition: opacity .25s ease;
}
.preloader.is-visible { opacity: 1; }
.preloader[hidden] { display: none; }

.preloader__logo {
    width: min(58vw, 240px); height: auto;
    animation: preloader-breathe 2.4s ease-in-out infinite;
}

@keyframes preloader-breathe {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

/* Estrella fugaz: un trazo fino con degradado y una cabeza algo más
   marcada, que cae en diagonal cruzando la pantalla y se apaga a mitad
   de camino. Sutil: dura poco y repite con pausa. */
.preloader__star {
    position: absolute; top: 12%; left: -12%;
    width: 120px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(17, 17, 17, .45));
    transform: rotate(16deg);
    animation: preloader-shooting 3.2s ease-in infinite;
}
.preloader__star::after {
    content: '';
    position: absolute; right: -2px; top: -1.5px;
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(17, 17, 17, .55);
}

@keyframes preloader-shooting {
    0%   { transform: translate3d(0, 0, 0) rotate(16deg); opacity: 0; }
    6%   { opacity: .8; }
    45%  { opacity: 0; }
    100% { transform: translate3d(120vw, 38vh, 0) rotate(16deg); opacity: 0; }
}

/* Aviso de clic derecho */
.toast {
    position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem);
    z-index: 150; max-width: min(90vw, 480px);
    padding: .9rem 1.25rem;
    background: #111; color: #fff; font-size: .85rem; text-align: center;
    opacity: 0; transition: opacity .3s, transform .3s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[hidden] { display: none; }

/* 9. Pie ------------------------------------------------------------------ */
.footer { border-top: 1px solid var(--line); margin-top: 4rem; }
.footer__inner {
    max-width: var(--maxw); margin: 0 auto;
    padding: 2rem var(--gutter);
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
    font-size: .78rem; color: var(--fg-soft);
}
.footer__copy { margin: 0; }
/* El resto de `.footer__social` (tamaño, color, hover de los iconos) vive
   en `.social-icons`, cerca de `.sitenav__social` — ver sección 4. */

/* 10. Responsive ----------------------------------------------------------
   Móvil primero. A partir de 1024px la navegación pasa a ser una columna
   fija a la izquierda, como en el sitio original, y desaparece la barra
   superior.
   ------------------------------------------------------------------------- */

@media (min-width: 600px) {
    .contact { grid-template-columns: 1fr 1.4fr; }
    .product__layout { grid-template-columns: 1.1fr 1fr; }
    .photogrid { gap: 1.5rem; }
}

@media (min-width: 1024px) {
    .topbar { display: none; }

    .sitenav {
        transform: none;
        visibility: visible;
        transition: none;
        width: var(--nav-width);
        border-right: 1px solid var(--line);
    }
    .sitenav__close { display: none; }
    .sitenav-overlay { display: none !important; }

    .sitenav__inner { padding: 3rem 2rem 3rem 2.5rem; }

    body { padding-left: var(--nav-width); }

    .hero { height: 100vh; }

    .flashes { padding-inline: 3rem; }
    .wrap { padding: 4rem 3rem 5rem; }
    .footer__inner { padding-inline: 3rem; }
}

@media (min-width: 1440px) {
    :root { --nav-width: 340px; }
}

/* El sidebar fijo en escritorio no debe bloquear el scroll del contenido */
@media (min-width: 1024px) {
    .sitenav { position: fixed; }
}

/* Preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Impresión */
@media print {
    .sitenav, .topbar, .footer, .lightbox, .toast { display: none !important; }
    body { padding-left: 0; }
}

/* ==========================================================================
   11. Tienda: carrito, checkout, cuenta y pedidos
   ========================================================================== */

/* Utilidad de accesibilidad: oculta visualmente pero deja el texto
   disponible para los lectores de pantalla (etiquetas de campos que en
   pantalla se entienden por contexto). */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Carrito flotante ----------------------------------------------------
   Único acceso al carrito, y solo se pinta cuando hay algo dentro (lo
   decide el layout). Va fijo abajo a la derecha, por encima del contenido
   pero por debajo del menú lateral y del lightbox, que ocupan la pantalla
   entera cuando se abren. */
.cartfab {
    /* Se levanta por encima de los puntos del carrusel de la portada
       (`.hero__dots`, abajo a la derecha): si no, los tapa justo cuando
       el visitante quiere cambiar de foto. */
    position: fixed; right: 1.25rem; bottom: 4.25rem; z-index: 55;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.1rem;
    background: var(--fg); color: #fff;
    border-radius: 999px;
    font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    transition: transform .2s var(--ease), opacity .2s;
}
.cartfab:hover { transform: translateY(-2px); opacity: .92; }
.cartfab svg { flex: none; }

.cartfab__count {
    min-width: 20px; height: 20px; padding: 0 .35rem;
    border-radius: 999px; background: #fff; color: var(--fg);
    font-size: .72rem; line-height: 20px; text-align: center;
}

/* En pantallas estrechas el texto sobra: manda el icono con el número. */
@media (max-width: 600px) {
    .cartfab { gap: .45rem; padding: .7rem .85rem; }
    .cartfab__label {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* El pie de la portada (`.hero__caption`) es texto normal en flujo, así
   que no le "esquiva" al `.cartfab` fixed que se le posa encima en la
   esquina inferior derecha: sin este hueco, el texto del intro queda
   tapado por el botón justo debajo de 1024px, donde el carrito flotante
   es el único acceso al carrito. Solo se aplica cuando el body trae
   `.has-cartfab` (carrito con contenido) para no restar ancho de más al
   texto el resto del tiempo. */
@media (max-width: 1023.98px) {
    .has-cartfab .hero__caption { padding-right: 6.5rem; }
}
@media (min-width: 601px) and (max-width: 1023.98px) {
    .has-cartfab .hero__caption { padding-right: 11rem; }
}

/* Mismo problema, pero con los campos de formulario: en pantallas de
   celular, el botón cae justo sobre la franja donde suelen terminar
   formularios cortos (contacto, entrar, crear cuenta) al abrirlos sin
   scroll, tapando la esquina del último campo. Se le resta ancho a los
   campos en vez de a sus contenedores porque los formularios usan varios
   layouts distintos (`.authform`, `.contact`, `.checkout`, campos sueltos)
   y el campo es lo único que se repite en todos. */
@media (max-width: 1023.98px) {
    .has-cartfab .field__input,
    .has-cartfab .field__textarea,
    .has-cartfab .field__select { max-width: calc(100% - 6.5rem); }
}
@media (min-width: 601px) and (max-width: 1023.98px) {
    .has-cartfab .field__input,
    .has-cartfab .field__textarea,
    .has-cartfab .field__select { max-width: calc(100% - 11rem); }
}

/* "Mi cuenta" cierra el menú lateral como una sección más: hereda todo el
   aspecto de `.sitenav__list` y se pega al bloque anterior, sin hueco, para
   que la lista se lea como una sola. */
.sitenav__list--account { margin-top: 0; }

/* --- Botón de compra en la ficha de producto ----------------------------- */
.addtocart { display: flex; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.addtocart__qty { width: 78px; text-align: center; }

/* --- Carrito ------------------------------------------------------------- */
.cartlist { list-style: none; margin: 0; padding: 0; }
.cartlist__item {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas: "thumb body" "qty price";
    gap: .75rem 1rem; align-items: center;
    padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.cartlist__thumb {
    grid-area: thumb;
    width: 64px; height: 64px; background: #f2f2f2; overflow: hidden;
}
.cartlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cartlist__body { grid-area: body; }
.cartlist__title { display: block; font-size: .98rem; }
.cartlist__unit { color: var(--fg-soft); font-size: .82rem; }
.cartlist__qty { grid-area: qty; }
.cartlist__qty .field__input { width: 84px; text-align: center; }
.cartlist__price { grid-area: price; text-align: right; font-size: .98rem; }

.cart__actions { margin-top: 1.25rem; }
.cart__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--line-strong);
    font-size: 1.1rem;
}
.cart__footer {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-top: 2rem;
}
.cart__footer .btn { flex: 1 1 auto; text-align: center; }

/* --- Checkout ------------------------------------------------------------ */
.checkout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.checkout__block { margin-bottom: 2rem; }
.checkout__title {
    font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fg-faint); margin: 0 0 1.25rem;
}

/* Elección del medio de pago: toda la fila es clicable. */
.paymethod {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .9rem 1rem; margin-bottom: .6rem;
    border: 1px solid var(--line); cursor: pointer;
    transition: border-color .2s;
}
.paymethod:hover { border-color: var(--fg-soft); }
.paymethod:has(input:checked) { border-color: var(--fg); }
.paymethod input { margin-top: .25rem; accent-color: var(--fg); }
.paymethod small { display: block; color: var(--fg-soft); font-size: .84rem; }

/* --- Resumen del pedido -------------------------------------------------- */
.summary { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .92rem; }
.summary__row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.summary__row small { color: var(--fg-soft); }
.summary__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 1rem 0 1.5rem; padding-top: .75rem;
    border-top: 1px solid var(--line-strong); font-size: 1.05rem;
}
.summary__back { margin: 1rem 0 0; text-align: center; font-size: .85rem; }

/* --- Ficha de pedido ----------------------------------------------------- */
.orderhead {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-start; justify-content: space-between;
    padding-bottom: 1.75rem; margin-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}
.orderhead__ref {
    margin: .2rem 0 .35rem;
    font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 400; letter-spacing: .01em;
}
.orderhead__date { margin: 0; color: var(--fg-soft); font-size: .9rem; }

/* Distintivo de estado. El sitio es blanco y negro; acá el color sí entra,
   porque el estado de un pedido es justo lo que hay que leer sin leer. */
.tag {
    display: inline-block; padding: .22rem .7rem; border-radius: 999px;
    background: #f0f0f0; color: #4a4a4a;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap; vertical-align: middle;
}
.tag--ok { background: #e7f4ec; color: #15803d; }
.tag--warn { background: #fdf2e2; color: #b45309; }
.tag--muted { background: #f0f0f0; color: #9a9a9a; }
.tag--lg { padding: .4rem 1rem; font-size: .74rem; }

/* Recorrido del pedido: los tres pasos que sí ocurren siempre, con el
   actual marcado. Es lo primero que mira quien abre la página. */
.ordersteps {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    list-style: none; margin: 0 0 2rem; padding: 0;
    counter-reset: step;
}
.orderstep {
    position: relative; padding-top: 1.6rem; text-align: center;
    font-size: .78rem; color: var(--fg-faint);
}
/* Línea que une los pasos: se dibuja hacia la izquierda de cada punto, así
   el primero no arrastra un tramo suelto fuera del recorrido. */
.orderstep::before {
    content: ''; position: absolute; top: 5px; right: 50%; left: -50%;
    height: 1px; background: var(--line);
}
.orderstep:first-child::before { display: none; }
.orderstep.is-done::before { background: var(--fg); }

/* El punto va por encima de la línea que une los pasos: si no, la línea
   del paso siguiente le cruza por encima y lo parte al medio. */
.orderstep__dot {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
    width: 11px; height: 11px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line-strong);
}
.orderstep.is-done .orderstep__dot { background: var(--fg); border-color: var(--fg); }
.orderstep.is-current .orderstep__dot { box-shadow: 0 0 0 4px rgba(0, 0, 0, .08); }
.orderstep.is-done { color: var(--fg); }
.orderstep.is-current { font-weight: 500; }
.orderstep__label { display: block; padding: 0 .25rem; }

.orderstate { font-size: 1rem; color: #333; margin-bottom: 2rem; }

.orderbox {
    padding: 1.75rem; margin-bottom: 1.25rem;
    border: 1px solid var(--line);
}
.orderbox--highlight { background: #fafafa; border-color: var(--line-strong); }
.orderbox__title {
    font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fg-faint); margin: 0 0 1.25rem;
}
.orderaddress { margin: 0; font-size: .92rem; line-height: 1.7; }

.ordercols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.ordercols .orderbox { margin-bottom: 0; }

/* Lo comprado, con la foto: el pedido se reconoce de un vistazo, sin
   tener que leer el título. */
.orderitems { list-style: none; margin: 0; padding: 0; }
.orderitem {
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: 1rem; align-items: center;
    padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.orderitem:first-child { padding-top: 0; }
.orderitem__thumb {
    width: 56px; height: 56px; overflow: hidden; background: #f2f2f2;
}
.orderitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.orderitem__thumb--empty { border: 1px solid var(--line); background: none; }
.orderitem__body { min-width: 0; }
.orderitem__title { display: block; font-size: .95rem; }
a.orderitem__title:hover { text-decoration: underline; }
.orderitem__meta { display: block; margin-top: .2rem; color: var(--fg-soft); font-size: .82rem; }
.orderitem__price { font-size: .95rem; white-space: nowrap; }

/* Datos bancarios: pares etiqueta/valor fáciles de copiar. */
.bankdata {
    display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem;
    margin: 1rem 0; font-size: .92rem;
}
.bankdata dt { color: var(--fg-soft); }
.bankdata dd { margin: 0; font-weight: 500; word-break: break-all; }

/* Seguimiento de estados */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
    position: relative; padding: 0 0 1.25rem 1.25rem;
    border-left: 1px solid var(--line);
}
.timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline__item::before {
    content: ''; position: absolute; left: -4px; top: .45rem;
    width: 7px; height: 7px; border-radius: 50%; background: var(--fg);
}
.timeline__item small { display: block; color: var(--fg-faint); font-size: .78rem; }
.timeline__item p { margin: .35rem 0 0; font-size: .88rem; color: var(--fg-soft); }

/* --- Cuenta del comprador ------------------------------------------------ */

/* Cifras de un vistazo: cuántos pedidos, cuánto se pagó de verdad, desde
   cuándo es cliente. Solo aparece si hay al menos un pedido —antes de la
   primera compra no hay nada que resumir. */
.acctstats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
    list-style: none; margin: 0 0 2.5rem; padding: 0;
    background: var(--line); border: 1px solid var(--line);
}
.acctstat { padding: 1.1rem 1.25rem; background: #fff; }
.acctstat__value { display: block; font-size: 1.4rem; letter-spacing: -.01em; }
.acctstat__label {
    display: block; margin-top: .2rem;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft);
}

.accountgrid { display: grid; grid-template-columns: 1fr; gap: 3rem; }

/* Toda la fila es el enlace —no solo la referencia—, con una zona táctil
   cómoda y una flecha que deja claro que hay más adentro. */
.orderlist { list-style: none; margin: 0; padding: 0; }
.orderlist__item {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: 1.1rem .25rem; border-bottom: 1px solid var(--line);
    transition: background .15s;
}
.orderlist li:last-child .orderlist__item { border-bottom: 0; }
.orderlist__item:hover { background: #fafafa; }
.orderlist__ref { font-weight: 500; }
.orderlist__date { color: var(--fg-soft); font-size: .85rem; }
.orderlist__total { font-size: .95rem; font-weight: 500; margin-left: auto; }
.orderlist__chevron { color: var(--fg-faint); flex: none; }

/* Formulario de datos, agrupado por lo que cada bloque realmente es —no
   una lista plana de ocho campos sueltos. */
.acctform__group {
    padding-bottom: 1.75rem; margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--line);
}
.acctform__hint { margin: -.75rem 0 1.25rem; font-size: .85rem; color: var(--fg-soft); }
.acctform__logout { margin-top: 1rem; }

.authform { max-width: 420px; margin: 0 auto; }
.authform__foot {
    max-width: 420px; margin: 1.5rem auto 0;
    text-align: center; font-size: .88rem; color: var(--fg-soft);
}
.authform__foot a { border-bottom: 1px solid var(--line-strong); }

/* --- Responsive de la tienda --------------------------------------------- */
@media (min-width: 600px) {
    .cartlist__item {
        grid-template-columns: 72px 1fr 110px 120px;
        grid-template-areas: "thumb body qty price";
    }
    .cart__footer .btn { flex: 0 0 auto; }
    .cart__footer { justify-content: space-between; }
    .accountgrid { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

@media (min-width: 900px) {
    .checkout { grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; }
    /* El resumen acompaña al formulario mientras se completa. */
    .checkout__side { position: sticky; top: 2rem; }

    /* Envío y seguimiento caben lado a lado: son dos datos de consulta,
       no dos pasos que haya que leer en orden. */
    .ordercols { grid-template-columns: 1fr 1fr; }
}