/* =============================================================================
   MAIN.CSS — Sistema de diseño completo de Ive Estudio Creativo
   Tema: ive-estudio-v2 | Versión: 2.0.0
   Estilo: Editorial premium · Industrial cálido · Femenino sofisticado

   ÍNDICE:
   01. FUENTES (@font-face comentado — activar con archivos locales .woff2)
   02. VARIABLES CSS (Custom Properties)
   03. RESET Y BASE
   04. TIPOGRAFÍA
   05. LAYOUT GLOBAL
   06. ANIMACIONES Y TRANSICIONES BASE
   07. COMPONENTES — BOTONES
   08. COMPONENTES — BADGES DE CATEGORÍA
   09. COMPONENTES — TARJETAS BASE
   10. HEADER
   11. MENÚ HAMBURGUESA Y NAV MÓVIL
   12. FOOTER
   13. PÁGINA GENÉRICA (page.php)
   14. HERO INTERIOR REUTILIZABLE
   15. UTILIDADES
   16. ACCESIBILIDAD
   17. MEDIA QUERIES
   ============================================================================= */


/* =============================================================================
   01. FUENTES — @font-face LOCAL (ACTIVAR AL DESCARGAR LOS .woff2)
   =============================================================================
   INSTRUCCIONES:
   1. Descarga Cormorant Garamond de: https://fonts.google.com/specimen/Cormorant+Garamond
      Pesos recomendados: 300, 400, 500, 600
   01. FUENTES — Google Fonts (Recomendado para inicio rápido)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* 
   NOTA: Si prefieres alojar las fuentes localmente por privacidad (GDPR),
   comenta el @import de arriba, descarga los archivos .woff2 y descomenta 
   las siguientes reglas.
*/

/*
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/


/* =============================================================================
   02. VARIABLES CSS — CUSTOM PROPERTIES
   ============================================================================= */

:root {

    /* ── PALETA DE COLORES ─────────────────────────────────────── */
    --ciruela:       #5E2C57;   /* Footer, acentos fuertes, elementos de énfasis */
    --lavanda:       #C7B0C8;   /* Detalles, hover, bordes decorativos */
    --nude:          #D7C1B6;   /* Fondos secundarios, tarjetas, secciones alternas */
    --coral:         #E8A18F;   /* Botones primarios / CTAs */
    --durazno:       #F2C2B1;   /* Acentos cálidos, fondos de proceso */
    --blanco-hueso:  #F7F3EE;   /* Fondo principal del sitio */
    --gris-cemento:  #D9D3CC;   /* Bordes, líneas divisorias */
    --carbon:        #2E2730;   /* Textos principales y encabezados */

    /* ── VARIANTES SEMÁNTICAS ──────────────────────────────────── */
    --color-fondo:         var(--blanco-hueso);
    --color-texto:         var(--carbon);
    --color-texto-claro:   #6B5E6A;
    --color-borde:         var(--gris-cemento);
    --color-acento:        var(--coral);
    --color-acento-hover:  #D98478;   /* coral oscurecido 8% */
    --color-secundario:    var(--ciruela);

    /* ── TIPOGRAFÍA ────────────────────────────────────────────── */
    /* SERIF: Para titulares, párrafos editoriales y elementos de énfasis */
    --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    /* SANS: Para cuerpo de texto, navegación, botones y UI */
    --font-sans:    'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* MONO: Solo si se necesita para etiquetas de código o numeración */
    --font-mono:    'Courier New', Courier, monospace;

    /* ── ESCALA TIPOGRÁFICA (fluid con clamp) ──────────────────── */
    --text-xs:    clamp(0.70rem,  0.65rem + 0.25vw, 0.75rem);   /*  11-12px */
    --text-sm:    clamp(0.80rem,  0.75rem + 0.25vw, 0.875rem);  /*  13-14px */
    --text-base:  clamp(0.9375rem,0.90rem + 0.25vw, 1rem);      /*  15-16px */
    --text-md:    clamp(1rem,     0.95rem + 0.35vw, 1.125rem);  /*  16-18px */
    --text-lg:    clamp(1.1rem,   1.00rem + 0.60vw, 1.375rem);  /*  18-22px */
    --text-xl:    clamp(1.25rem,  1.10rem + 0.90vw, 1.75rem);   /*  20-28px */
    --text-2xl:   clamp(1.5rem,   1.25rem + 1.25vw, 2.25rem);   /*  24-36px */
    --text-3xl:   clamp(1.875rem, 1.50rem + 1.75vw, 3rem);      /*  30-48px */
    --text-4xl:   clamp(2.25rem,  1.75rem + 2.25vw, 3.75rem);   /*  36-60px */
    --text-5xl:   clamp(2.75rem,  2.00rem + 3.00vw, 4.75rem);   /*  44-76px */

    /* ── ESPACIADOS ────────────────────────────────────────────── */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* ── ESPACIADOS DE SECCIÓN ─────────────────────────────────── */
    --section-py:  clamp(var(--space-16), 8vw, var(--space-24));
    --section-gap: clamp(var(--space-12), 6vw, var(--space-20));

    /* ── LAYOUT ────────────────────────────────────────────────── */
    --container-max:   1200px;
    --container-px:    clamp(var(--space-6), 5vw, var(--space-16));
    --header-height:   72px;   /* Altura del header para compensar sticky */

    /* ── BORDES Y RADIOS ───────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ── SOMBRAS ───────────────────────────────────────────────── */
    --shadow-sm:  0 1px  3px rgba(46, 39, 48, 0.06), 0 1px 2px rgba(46, 39, 48, 0.04);
    --shadow-md:  0 4px 12px rgba(46, 39, 48, 0.08), 0 2px 4px rgba(46, 39, 48, 0.04);
    --shadow-lg:  0 8px 30px rgba(46, 39, 48, 0.10), 0 4px 8px rgba(46, 39, 48, 0.04);
    --shadow-xl:  0 20px 60px rgba(46, 39, 48, 0.12);
    --shadow-card: 0 2px 8px rgba(94, 44, 87, 0.06);
    --shadow-card-hover: 0 8px 32px rgba(94, 44, 87, 0.14);

    /* ── TRANSICIONES ──────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-INDEX ───────────────────────────────────────────────── */
    --z-dropdown:  100;
    --z-overlay:   200;
    --z-header:    300;
    --z-modal:     400;
    --z-toast:     500;
}


/* =============================================================================
   03. RESET Y BASE
   ============================================================================= */

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

html {
    font-size: 100%;        /* 16px base */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Compensar el header sticky al hacer scroll a anclas */
    scroll-padding-top: calc(var(--header-height) + var(--space-8));
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Quitar estilos por defecto de listas cuando son de navegación */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Imágenes responsivas por defecto */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Heredar fuentes en formularios */
input,
button,
textarea,
select {
    font: inherit;
}

/* Evitar overflow en textos largos */
p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Resetear los enlaces */
a {
    color: inherit;
    text-decoration: none;
}

/* Lista sin estilo para navegación */
ul {
    list-style: none;
}

/* Separadores */
hr {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: var(--space-8) 0;
}

/* Imágenes de WordPress */
.wp-caption,
.wp-caption-text,
.gallery-caption {
    font-size: var(--text-sm);
    color: var(--color-texto-claro);
}

/* Alineaciones de imagen de WordPress */
.alignleft  { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin: var(--space-6) auto; }
.alignnone  { display: block; }


/* =============================================================================
   04. TIPOGRAFÍA
   ============================================================================= */

/* ── Encabezados ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--carbon);
}

h1, .h1 { font-size: var(--text-5xl); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-4xl); font-weight: 400; line-height: 1.15; }
h3, .h3 { font-size: var(--text-3xl); font-weight: 500; }
h4, .h4 { font-size: var(--text-2xl); font-weight: 500; }
h5, .h5 { font-size: var(--text-xl); font-weight: 600; }
h6, .h6 { font-size: var(--text-lg); font-weight: 600; font-family: var(--font-sans); }

/* ── Párrafos ─────────────────────────────────────────────────────────────── */

p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-texto);
}

.lead {
    font-size: var(--text-lg);
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.6;
    color: var(--color-texto-claro);
}

/* ── Etiquetas y overlines ────────────────────────────────────────────────── */

.label-overline {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ciruela);
    display: inline-block;
    margin-bottom: var(--space-4);
}

/* ── Citas ────────────────────────────────────────────────────────────────── */

blockquote {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ciruela);
    border-left: 3px solid var(--lavanda);
    padding-left: var(--space-8);
    margin: var(--space-8) 0;
}

/* ── Links ────────────────────────────────────────────────────────────────── */

.content-area a {
    color: var(--ciruela);
    text-decoration: underline;
    text-decoration-color: var(--lavanda);
    text-underline-offset: 3px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.content-area a:hover {
    color: var(--coral);
    text-decoration-color: var(--coral);
}

/* ── Listas de contenido ──────────────────────────────────────────────────── */

.content-area ul,
.content-area ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.content-area ul { list-style: disc; }
.content-area ol { list-style: decimal; }

.content-area li { margin-bottom: var(--space-2); }


/* =============================================================================
   05. LAYOUT GLOBAL
   ============================================================================= */

/* Contenedor principal */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

/* Contenedor estrecho para contenido editorial */
.container--narrow {
    max-width: 780px;
}

/* Contenedor ancho para galerías y portafolio */
.container--wide {
    max-width: 1400px;
}

/* Sección genérica con padding vertical */
.section {
    padding-block: var(--section-py);
}

/* Sección con fondo alternativo (nude/durazno) */
.section--alt {
    background-color: var(--nude);
}

.section--durazno {
    background-color: var(--durazno);
    background-image: none;
}

/* Compensar el header sticky en el primer elemento */
.site-main {
    padding-top: var(--header-height);
}

/* Divisor decorativo */
.section-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--coral) 0%, var(--lavanda) 100%);
    border-radius: var(--radius-full);
    margin: var(--space-6) 0;
}

.section-divider--center {
    margin-inline: auto;
}

/* Encabezado de sección */
.section-header {
    margin-bottom: var(--section-gap);
}

.section-header--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =============================================================================
   06. ANIMACIONES Y TRANSICIONES BASE
   ============================================================================= */

/* ── Reveal al hacer scroll (IntersectionObserver en main.js) ─────────────── */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de dirección */
.reveal--left  { transform: translateX(-24px); }
.reveal--right { transform: translateX(24px); }
.reveal--scale { transform: scale(0.96); }

.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
    transform: translateX(0) scale(1);
}

/* Delay escalonado para grids */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }

/* ── Fallback: si JS está deshabilitado, mostrar todo ─────────────────────── */
.no-js .reveal {
    opacity: 1;
    transform: none;
}


/* =============================================================================
   07. COMPONENTES — BOTONES
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-fast),
        box-shadow var(--transition-base);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

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

.btn:active {
    transform: translateY(0);
}

/* Efecto ripple sutil */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background var(--transition-fast);
}
.btn:hover::after {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Variante Coral (CTA primario) ──────────────────────────────────────── */
.btn--coral {
    background-color: var(--coral);
    color: #fff;
    border-color: var(--coral);
    box-shadow: 0 2px 12px rgba(232, 161, 143, 0.35);
}

.btn--coral:hover {
    background-color: var(--color-acento-hover);
    border-color: var(--color-acento-hover);
    box-shadow: 0 6px 20px rgba(232, 161, 143, 0.45);
    color: #fff;
}

/* ── Variante Outline Ciruela (CTA secundario) ──────────────────────────── */
.btn--outline {
    background-color: transparent;
    color: var(--ciruela);
    border-color: var(--ciruela);
}

.btn--outline:hover {
    background-color: var(--ciruela);
    color: var(--blanco-hueso);
    box-shadow: 0 4px 16px rgba(94, 44, 87, 0.25);
}

/* ── Variante Blanco (para fondos oscuros) ──────────────────────────────── */
.btn--white {
    background-color: var(--blanco-hueso);
    color: var(--ciruela);
    border-color: var(--blanco-hueso);
}

.btn--white:hover {
    background-color: transparent;
    color: var(--blanco-hueso);
    border-color: var(--blanco-hueso);
}

/* ── Variante Outline Blanco (para footer ciruela) ──────────────────────── */
.btn--outline-white {
    background-color: transparent;
    color: var(--blanco-hueso);
    border-color: rgba(247, 243, 238, 0.5);
}

.btn--outline-white:hover {
    background-color: var(--blanco-hueso);
    color: var(--ciruela);
    border-color: var(--blanco-hueso);
}

/* ── Tamaños ─────────────────────────────────────────────────────────────── */
.btn--sm {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-xs);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

/* ── Icono dentro del botón ─────────────────────────────────────────────── */
.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* =============================================================================
   08. COMPONENTES — BADGES DE CATEGORÍA
   ============================================================================= */

.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    background-color: var(--nude);
    color: var(--ciruela);
    border: 1px solid var(--lavanda);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.badge--active,
.badge:hover {
    background-color: var(--ciruela);
    color: var(--blanco-hueso);
    border-color: var(--ciruela);
}

.badge--coral {
    background-color: var(--durazno);
    color: var(--carbon);
    border-color: var(--coral);
}


/* =============================================================================
   09. COMPONENTES — TARJETAS BASE
   ============================================================================= */

.card {
    background-color: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Placeholder visual para cards sin imagen (gradiente de la paleta) */
.card__image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Patrón geométrico abstracto sobre el gradiente */
.card__image-placeholder::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    top: 20%;
    left: 20%;
}

.card__image-placeholder::after {
    content: '';
    position: absolute;
    width: 40%;
    height: 40%;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    bottom: 15%;
    right: 15%;
}

.card__body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--carbon);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-texto-claro);
    line-height: 1.65;
    flex: 1;
    margin-bottom: var(--space-4);
}

.card__footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Imagen real de la tarjeta */
.card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card:hover .card__image {
    transform: scale(1.04);
}


/* =============================================================================
   10. HEADER
   ============================================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    background-color: var(--blanco-hueso);
    border-bottom: 1px solid transparent;
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background-color var(--transition-base);
    will-change: transform;
}

/* Estado al hacer scroll — JS añade esta clase */
.site-header--scrolled {
    border-bottom-color: var(--gris-cemento);
    box-shadow: 0 2px 20px rgba(46, 39, 48, 0.07);
}

/* Layout interno del header */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-6);
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */

.site-header__logo {
    flex-shrink: 0;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.site-logo:hover {
    opacity: 0.85;
}

.site-logo__img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.site-logo__svg {
    height: 48px;
    width: auto;
}

/* Logo en footer (ligeramente más pequeño) */
.footer-logo .site-logo__img,
.footer-logo .site-logo__svg {
    height: 42px;
    /* Invertir colores del SVG para el fondo ciruela del footer */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ── Navegación ─────────────────────────────────────────────────────────── */

.site-header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nav-menu li {
    position: relative;
}

.nav-menu > li > a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--carbon);
    border-radius: var(--radius-sm);
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
    position: relative;
}

/* Línea inferior animada en hover */
.nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: var(--space-3);
    right: var(--space-3);
    height: 1.5px;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base);
    border-radius: var(--radius-full);
}

.nav-menu > li > a:hover {
    color: var(--ciruela);
}

.nav-menu > li > a:hover::after,
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current_page_item > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a {
    color: var(--ciruela);
    font-weight: 600;
}

/* Fallback de navegación (visible solo para administradores) */
.nav-menu--fallback {
    font-size: var(--text-sm);
    color: var(--coral);
}

/* — Acciones del header (CTA + hamburguesa) ——————————————————————————————————— */

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* CTA del header */
.site-header__cta {
    /* Hereda estilos de .btn .btn--coral .btn--sm */
}


/* =============================================================================
   11. MENÚ HAMBURGUESA Y NAV MÓVIL
   ============================================================================= */

/* — Botón hamburguesa ————————————————————————————————————————————————————————— */

.site-header__hamburger {
    display: none; /* Solo visible en móvil — activado via media query */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    background: none;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: var(--space-2);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
    flex-shrink: 0;
}

.site-header__hamburger:hover {
    border-color: var(--ciruela);
    background-color: rgba(94, 44, 87, 0.04);
}

.hamburger__bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: var(--carbon);
    border-radius: var(--radius-full);
    transition:
        transform var(--transition-base),
        opacity var(--transition-fast),
        width var(--transition-base);
    transform-origin: center;
}

/* Animación de las 3 barras → X cuando el menú está abierto */
.site-header__hamburger[aria-expanded="true"] .hamburger__bar--top {
    transform: translateY(6.5px) rotate(45deg);
}

.site-header__hamburger[aria-expanded="true"] .hamburger__bar--middle {
    opacity: 0;
    width: 0;
}

.site-header__hamburger[aria-expanded="true"] .hamburger__bar--bottom {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* — Overlay del menú móvil ———————————————————————————————————————————————————— */

.nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(46, 39, 48, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: calc(var(--z-header) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.nav-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* — Panel de menú en móvil ——————————————————————————————————————————————————— */

@media (max-width: 1023px) {

    .site-header__hamburger {
        display: flex;
    }

    /* El CTA en header se mantiene en tablet, se oculta en mobile pequeño */
    @media (max-width: 639px) {
        .site-header__cta {
            display: none;
        }
    }

    /* El nav se transforma en panel deslizante */
    .site-header__nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 85vw);
        background-color: var(--blanco-hueso);
        z-index: var(--z-header);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: calc(var(--header-height) + var(--space-8)) var(--space-8) var(--space-8);
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        box-shadow: -8px 0 40px rgba(46, 39, 48, 0.12);
        overflow-y: auto;
    }

    .site-header__nav.is-open {
        transform: translateX(0);
    }

    /* Items del menú en móvil */
    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .nav-menu > li {
        width: 100%;
        border-bottom: 1px solid var(--color-borde);
    }

    .nav-menu > li > a {
        display: block;
        padding: var(--space-4) 0;
        font-size: var(--text-md);
        font-weight: 500;
        width: 100%;
    }

    .nav-menu > li > a::after {
        display: none;
    }

    .nav-menu > li > a:hover {
        color: var(--coral);
    }

    /* CTA al final del menú móvil */
    .site-header__nav::after {
        content: '';
        display: block;
        height: var(--space-6);
    }
}


/* =============================================================================
   12. FOOTER
   ============================================================================= */

.site-footer {
    background-color: var(--ciruela);
    color: var(--blanco-hueso);
    position: relative;
    overflow: hidden;
}

/* — Cuerpo del footer ————————————————————————————————————————————————————————— */

.site-footer__body {
    padding-block: var(--space-16) var(--space-12);
    position: relative;
    z-index: 1;
}

/* Frase editorial */
.site-footer__headline {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid rgba(199, 176, 200, 0.2);
}

.footer-editorial-phrase {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: 300;
    font-style: italic;
    color: var(--blanco-hueso);
    line-height: 1.2;
    letter-spacing: -0.01em;
    opacity: 0.95;
}

/* Grid de 3 columnas */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

/* — Columna de marca ————————————————————————————————————————————————————————— */

.footer-logo {
    margin-bottom: var(--space-5);
}

.footer-description {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: rgba(247, 243, 238, 0.75);
    margin-bottom: var(--space-6);
    max-width: 280px;
}

/* Redes sociales */
.footer-social {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(199, 176, 200, 0.3);
    border-radius: var(--radius-full);
    color: rgba(247, 243, 238, 0.8);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-fast);
}

.footer-social__link:hover {
    background-color: rgba(199, 176, 200, 0.2);
    border-color: var(--lavanda);
    color: var(--blanco-hueso);
    transform: translateY(-2px);
}

.footer-social__icon {
    width: 16px;
    height: 16px;
}

/* — Columna de navegación (2 sub-columnas internas) —————————————————————————— */

.site-footer__col--nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

/* Título de grupo de navegación */
.footer-nav__title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lavanda);
    margin-bottom: var(--space-5);
}

/* Lista de navegación */
.footer-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-nav__list li a {
    font-size: var(--text-sm);
    color: rgba(247, 243, 238, 0.72);
    transition: color var(--transition-fast), opacity var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-nav__list li a:hover {
    color: var(--blanco-hueso);
}

/* Flecha sutil en hover */
.footer-nav__list li a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 1px;
    background: var(--coral);
    transition: width var(--transition-fast);
    vertical-align: middle;
}

.footer-nav__list li a:hover::before {
    width: 8px;
}

/* — Columna de contacto —————————————————————————————————————————————————————— */

.footer-contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-contact__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.footer-contact__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--lavanda);
}

.footer-contact__svg {
    width: 18px;
    height: 18px;
}

.footer-contact__link,
.footer-contact__text {
    font-size: var(--text-sm);
    color: rgba(247, 243, 238, 0.78);
    line-height: 1.5;
    transition: color var(--transition-fast);
}

.footer-contact__link:hover {
    color: var(--blanco-hueso);
}

/* — Barra inferior del footer ———————————————————————————————————————————————— */

.site-footer__bottom {
    border-top: 1px solid rgba(199, 176, 200, 0.15);
    padding-block: var(--space-5);
    position: relative;
    z-index: 1;
}

.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-copyright {
    font-size: var(--text-xs);
    color: rgba(247, 243, 238, 0.5);
    letter-spacing: 0.03em;
}

.footer-copyright a {
    color: rgba(247, 243, 238, 0.7);
    transition: color var(--transition-fast);
}

.footer-copyright a:hover {
    color: var(--blanco-hueso);
}

.footer-legal-nav {
    display: flex;
    gap: var(--space-6);
}

.footer-legal-nav__link {
    font-size: var(--text-xs);
    color: rgba(247, 243, 238, 0.5);
    letter-spacing: 0.04em;
    transition: color var(--transition-fast);
}

.footer-legal-nav__link:hover {
    color: rgba(247, 243, 238, 0.9);
}


/* =============================================================================
   13. PÁGINA GENÉRICA (page.php)
   ============================================================================= */

.page-content {
    max-width: 780px;
    margin-inline: auto;
    padding-block: var(--space-16);
}

.page-content h1 {
    margin-bottom: var(--space-6);
}

.page-content .page-body > * + * {
    margin-top: var(--space-4);
}

.page-content .page-body h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.page-content .page-body h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }

/* Páginas de aviso de privacidad y similares */
.page-aviso .page-content {
    padding-block: var(--space-12) var(--space-20);
}


/* =============================================================================
   14. HERO INTERIOR REUTILIZABLE (template-parts/page-hero.php)
   ============================================================================= */

.page-hero {
    padding-block: clamp(var(--space-12), 8vw, var(--space-20));
    background-color: var(--nude);
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Círculos decorativos de fondo del hero interior */
.page-hero::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border: 40px solid rgba(94, 44, 87, 0.06);
    border-radius: 50%;
    top: -80px;
    right: -60px;
    pointer-events: none;
}

.page-hero::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--durazno) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -60px;
    left: 5%;
    pointer-events: none;
    opacity: 0.5;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin-inline: auto;
}

.page-hero__label {
    /* Hereda de .label-overline */
}

.page-hero__title {
    font-size: var(--text-4xl);
    font-weight: 400;
    color: var(--carbon);
    margin-bottom: var(--space-5);
}

.page-hero__description {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-texto-claro);
    line-height: 1.65;
    max-width: 560px;
    margin-inline: auto;
}

/* Divisor decorativo debajo del hero */
.page-hero + .section {
    position: relative;
}

.page-hero + .section::before {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--coral), var(--lavanda));
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-12);
}


/* =============================================================================
   15. UTILIDADES
   ============================================================================= */

/* Visibilidad */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alineación de texto */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Display */
.d-flex  { display: flex; }
.d-grid  { display: grid; }
.d-none  { display: none; }
.d-block { display: block; }

/* Colores de texto */
.text-ciruela   { color: var(--ciruela); }
.text-coral     { color: var(--coral); }
.text-carbon    { color: var(--carbon); }
.text-muted     { color: var(--color-texto-claro); }

/* Fondos */
.bg-nude        { background-color: var(--nude); }
.bg-durazno     { background-color: var(--durazno); }
.bg-ciruela     { background-color: var(--ciruela); color: var(--blanco-hueso); }
.bg-bone        { background-color: var(--blanco-hueso); }

/* Márgenes */
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-auto { margin-top: auto; }

/* Grid utilities */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* WordPress body no-scroll cuando el menú está abierto */
body.menu-open {
    overflow: hidden;
}


/* =============================================================================
   16. ACCESIBILIDAD
   ============================================================================= */

/* Skip to content */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--ciruela);
    color: var(--blanco-hueso);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    z-index: calc(var(--z-header) + 100);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}


/* =============================================================================
   17. MEDIA QUERIES
   ============================================================================= */

/* — Tablet grande y escritorio mediano ———————————————————————————————— 1024px- */
@media (max-width: 1199px) {

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }

    .site-footer__col--contact {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(199, 176, 200, 0.15);
        padding-top: var(--space-8);
    }

    .footer-description {
        max-width: 100%;
    }
}

/* — Tablet ———————————————————————————————————————————————————————————————————— 768px- */
@media (max-width: 767px) {

    :root {
        --header-height: 64px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .site-footer__col--nav {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    .site-footer__col--contact {
        grid-column: auto;
        border-top: 1px solid rgba(199, 176, 200, 0.15);
        padding-top: var(--space-6);
    }

    .footer-editorial-phrase {
        font-size: var(--text-3xl);
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero__title {
        font-size: var(--text-3xl);
    }
}

/* — Mobile ———————————————————————————————————————————————————————————————————— 480px- */
@media (max-width: 479px) {

    .site-footer__col--nav {
        grid-template-columns: 1fr;
    }

    .footer-editorial-phrase {
        font-size: var(--text-2xl);
    }

    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .btn--lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-sm);
    }

    .page-hero {
        padding-block: var(--space-10) var(--space-12);
    }
}

/* — Desktop grande ———————————————————————————————————————————————————————————— 1400px+ */
@media (min-width: 1400px) {

    :root {
        --container-px: var(--space-8);
    }

    .site-footer__grid {
        grid-template-columns: 1.2fr 1.8fr 1fr;
    }
}


/* =============================================================================
   18. HOME — HERO
   ============================================================================= */

.hero-home {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    padding-block: clamp(var(--space-16), 10vw, var(--space-32));
    position: relative;
    overflow: hidden;
    background-color: var(--blanco-hueso);
}

.hero-home::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(199,176,200,0.12) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    pointer-events: none;
}

.hero-home__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-12), 6vw, var(--space-20));
    align-items: center;
    width: 100%;
}

.hero-home__title {
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--carbon);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-6);
}

.hero-home__description { color: var(--color-texto-claro); max-width: 520px; margin-bottom: var(--space-8); }
.hero-home__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-10); }
.hero-home__trust { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-8); border-top: 1px solid var(--color-borde); }
.hero-trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 500; color: var(--color-texto-claro); }
.hero-trust-item svg { color: var(--ciruela); flex-shrink: 0; }
.hero-home__visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-visual { width: 100%; max-width: 480px; position: relative; }

.hero-visual__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--nude) 0%, var(--blanco-hueso) 50%, var(--durazno) 100%);
}

.hero-visual__block--main { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(160deg, var(--ciruela) 0%, #7B3D74 100%); border-radius: var(--radius-xl) var(--radius-xl) 0 0; opacity: 0.85; }
.hero-visual__circle--1 { position: absolute; width: 55%; height: 55%; border-radius: 50%; background: var(--lavanda); opacity: 0.6; top: 15%; left: 50%; transform: translateX(-50%); mix-blend-mode: multiply; }
.hero-visual__circle--2 { position: absolute; width: 35%; height: 35%; border-radius: 50%; background: var(--coral); opacity: 0.5; top: 5%; right: 10%; mix-blend-mode: multiply; animation: floatCircle 6s ease-in-out infinite; }

@keyframes floatCircle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-visual__accent--1 { position: absolute; width: 20%; height: 30%; background: var(--durazno); opacity: 0.7; bottom: 20%; left: 8%; border-radius: var(--radius-lg); transform: rotate(-8deg); }
.hero-visual__accent--2 { position: absolute; width: 30%; height: 4px; background: rgba(247,243,238,0.5); bottom: 55%; right: 10%; border-radius: var(--radius-full); }
.hero-visual__label-deco { position: absolute; bottom: var(--space-8); left: var(--space-6); display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.hero-visual__label-deco span { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; color: rgba(247,243,238,0.8); line-height: 1.4; }
.hero-visual__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* =============================================================================
   19-22. HOME SECTIONS
   ============================================================================= */

.services-preview { background-color: var(--blanco-hueso); }
.services-preview__title { font-size: var(--text-4xl); font-weight: 400; color: var(--carbon); margin-bottom: var(--space-4); }
.services-preview__subtitle { max-width: 560px; margin-inline: auto; margin-top: var(--space-4); }
.services-preview__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-bottom: var(--space-12); }
.services-preview__footer { text-align: center; }

.card-service { border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: transform var(--transition-base), box-shadow var(--transition-base); position: relative; overflow: hidden; }
.card-service::before { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.08); top: -40px; right: -40px; pointer-events: none; }
.card-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.card-service--ciruela { background: linear-gradient(135deg, var(--ciruela) 0%, #7B3D74 100%); color: var(--blanco-hueso); }
.card-service--nude    { background: var(--nude); color: var(--carbon); }
.card-service--lavanda { background: linear-gradient(135deg, var(--lavanda) 0%, #B09AB0 100%); color: var(--carbon); }
.card-service--durazno { background: linear-gradient(135deg, var(--durazno) 0%, var(--coral) 100%); color: var(--carbon); }
.card-service__icon-wrap { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(255,255,255,0.15); }
.card-service--nude .card-service__icon-wrap, .card-service--lavanda .card-service__icon-wrap, .card-service--durazno .card-service__icon-wrap { background: rgba(46,39,48,0.08); }
.card-service__icon { width: 28px; height: 28px; }
.card-service__title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; line-height: 1.3; margin: 0; }
.card-service__description { font-size: var(--text-sm); line-height: 1.65; opacity: 0.85; flex: 1; }
.card-service--ciruela .card-service__description { color: rgba(247,243,238,0.8); }
.card-service__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; margin-top: auto; transition: gap var(--transition-fast); }
.card-service--ciruela .card-service__link { color: var(--durazno); }
.card-service--nude .card-service__link, .card-service--lavanda .card-service__link, .card-service--durazno .card-service__link { color: var(--ciruela); }
.card-service:hover .card-service__link { gap: var(--space-3); }

.portfolio-preview__title { font-size: var(--text-4xl); font-weight: 400; color: var(--carbon); margin-bottom: var(--space-4); }
.portfolio-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-12); }
.portfolio-preview__footer { text-align: center; }

.portfolio-card { border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; }
.portfolio-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.portfolio-card__link { display: block; }
.portfolio-card__image-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.portfolio-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); display: block; }
.portfolio-card:hover .portfolio-card__image { transform: scale(1.06); }
.portfolio-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.portfolio-card__placeholder-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.15); }
.portfolio-card__placeholder-shape--1 { width: 55%; height: 55%; top: 10%; left: 5%; }
.portfolio-card__placeholder-shape--2 { width: 35%; height: 35%; bottom: 10%; right: 8%; background: rgba(255,255,255,0.1); }
.portfolio-card__placeholder-icon { position: relative; z-index: 1; width: 50px; height: 50px; opacity: 0.7; }
.portfolio-card__overlay { position: absolute; inset: 0; background: rgba(94,44,87,0.75); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-base); }
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }
.portfolio-card__overlay-cta { display: flex; align-items: center; gap: var(--space-2); color: var(--blanco-hueso); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transform: translateY(6px); transition: transform var(--transition-base); }
.portfolio-card:hover .portfolio-card__overlay-cta { transform: translateY(0); }
.portfolio-card__body { padding: var(--space-5) var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; }
.portfolio-card__cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.portfolio-card__title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; color: var(--carbon); line-height: 1.3; margin-bottom: var(--space-2); }
.portfolio-card__title a { color: inherit; transition: color var(--transition-fast); }
.portfolio-card__title a:hover { color: var(--ciruela); }
.portfolio-card__excerpt { font-size: var(--text-sm); color: var(--color-texto-claro); line-height: 1.6; margin: 0; }
.portfolio-empty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); opacity: 0.6; }
.portfolio-empty-card { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.portfolio-preview__admin-notice { text-align: center; font-size: var(--text-sm); color: var(--color-texto-claro); }
.portfolio-preview__admin-notice a { color: var(--ciruela); font-weight: 600; }

.process { background-color: var(--blanco-hueso); position: relative; overflow: hidden; }
.process::before { content: ''; position: absolute; width: 500px; height: 500px; border: 80px solid rgba(94,44,87,0.04); border-radius: 50%; bottom: -200px; right: -100px; pointer-events: none; }
.process__title { font-size: var(--text-4xl); font-weight: 400; }
.process__subtitle { max-width: 500px; margin-top: var(--space-4); }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); position: relative; z-index: 1; }
.process-step { position: relative; padding-top: var(--space-6); border-top: 2px solid var(--gris-cemento); }
.process-step:first-child { border-color: var(--coral); }
.process-step__number { font-family: var(--font-serif); font-size: clamp(3rem, 5vw, 5rem); font-weight: 300; color: rgba(94,44,87,0.1); line-height: 1; margin-bottom: var(--space-3); letter-spacing: -0.03em; }
.process-step__icon { width: 44px; height: 44px; color: var(--ciruela); margin-bottom: var(--space-5); }
.process-step__icon svg { width: 44px; height: 44px; }
.process-step__title { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; color: var(--carbon); margin-bottom: var(--space-3); }
.process-step__description { font-size: var(--text-sm); color: var(--color-texto-claro); line-height: 1.65; }

.cta-contact { background: linear-gradient(135deg, var(--ciruela) 0%, #3D1C38 100%); position: relative; overflow: hidden; padding-block: clamp(var(--space-20), 10vw, var(--space-32)); }
.cta-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.cta-deco--1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(199,176,200,0.15) 0%, transparent 70%); top: -150px; right: -100px; }
.cta-deco--2 { width: 250px; height: 250px; background: radial-gradient(circle, rgba(242,194,177,0.12) 0%, transparent 70%); bottom: -80px; left: 10%; }
.cta-deco--3 { width: 150px; height: 150px; border: 30px solid rgba(247,243,238,0.06); top: 50%; left: -40px; transform: translateY(-50%); }
.cta-contact__inner { position: relative; z-index: 1; text-align: center; max-width: 700px; margin-inline: auto; }
.cta-contact__title { font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: 400; color: var(--blanco-hueso); margin-bottom: var(--space-5); line-height: 1.2; }
.cta-contact__description { font-size: var(--text-md); color: rgba(247,243,238,0.8); line-height: 1.7; max-width: 540px; margin-inline: auto; margin-bottom: var(--space-8); }
.cta-contact__data { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-10); }
.cta-contact__data-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(247,243,238,0.8); transition: color var(--transition-fast); }
.cta-contact__data-item:hover { color: var(--blanco-hueso); }
.cta-contact__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); }

/* =============================================================================
   23. SERVICIOS
   ============================================================================= */

.services-nav { background-color: var(--blanco-hueso); border-bottom: 1px solid var(--gris-cemento); position: sticky; top: var(--header-height); z-index: calc(var(--z-header) - 1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.services-nav::-webkit-scrollbar { display: none; }
.services-nav__list { display: flex; padding: 0; width: max-content; min-width: 100%; }
.services-nav__item { display: flex; flex-direction: column; align-items: center; padding: var(--space-4) var(--space-5); font-size: var(--text-xs); color: var(--color-texto-claro); border-right: 1px solid var(--gris-cemento); transition: color var(--transition-fast); text-align: center; white-space: nowrap; gap: var(--space-1); min-width: 100px; position: relative; }
.services-nav__item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--coral); transform: scaleX(0); transition: transform var(--transition-base); }
.services-nav__item:hover, .services-nav__item--active { color: var(--ciruela); }
.services-nav__item:hover::after, .services-nav__item--active::after { transform: scaleX(1); }
.services-nav__num { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; color: var(--lavanda); line-height: 1; }
.services-nav__name { font-weight: 600; letter-spacing: 0.04em; }

.services-catalog__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }

.service-card { background: #fff; border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); box-shadow: var(--shadow-card); border: 1px solid var(--gris-cemento); display: flex; flex-direction: column; gap: var(--space-6); position: relative; scroll-margin-top: calc(var(--header-height) + 80px); transition: box-shadow var(--transition-base); }
.service-card:hover { box-shadow: var(--shadow-card-hover); }
.service-card__number { position: absolute; top: var(--space-6); right: var(--space-6); font-family: var(--font-serif); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 300; color: rgba(94,44,87,0.08); line-height: 1; letter-spacing: -0.03em; pointer-events: none; user-select: none; }
.service-card__header { display: flex; align-items: flex-start; gap: var(--space-4); }
.service-card__icon-wrap { width: 56px; height: 56px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--nude) 0%, var(--durazno) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ciruela); }
.service-card__icon { width: 28px; height: 28px; }
.service-card__title { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 500; color: var(--carbon); line-height: 1.25; padding-top: var(--space-2); }
.service-card__description { font-size: var(--text-base); color: var(--color-texto-claro); line-height: 1.75; }
.service-card__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.service-card__list-title { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ciruela); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.service-card__list-title svg { color: var(--coral); }
.service-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.service-card__list li { font-size: var(--text-sm); color: var(--color-texto); padding-left: var(--space-4); position: relative; line-height: 1.5; }
.service-card__list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--lavanda); }
.service-card__list--ideal li::before { background: var(--coral); }
.service-card__benefit { display: flex; align-items: flex-start; gap: var(--space-3); background: linear-gradient(135deg, var(--blanco-hueso) 0%, var(--nude) 100%); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--coral); }
.service-card__benefit svg { color: var(--coral); flex-shrink: 0; margin-top: 2px; }
.service-card__benefit p { font-size: var(--text-sm); font-weight: 500; color: var(--carbon); line-height: 1.5; margin: 0; }
.service-card__footer { margin-top: auto; }

.services-process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.services-process__step { text-align: center; padding: var(--space-8) var(--space-5); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.services-process__step-num { font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: 300; color: var(--ciruela); opacity: 0.3; line-height: 1; margin-bottom: var(--space-4); }
.services-process__step h3 { font-size: var(--text-xl); font-weight: 600; color: var(--carbon); margin-bottom: var(--space-3); }
.services-process__step p { font-size: var(--text-sm); color: var(--color-texto-claro); }

/* =============================================================================
   24. PORTAFOLIO
   ============================================================================= */

.portfolio-filters { background: var(--blanco-hueso); border-bottom: 1px solid var(--gris-cemento); padding-block: var(--space-4); position: sticky; top: var(--header-height); z-index: calc(var(--z-header) - 1); overflow-x: auto; scrollbar-width: none; }
.portfolio-filters::-webkit-scrollbar { display: none; }
.portfolio-filters__bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: nowrap; width: max-content; min-width: 100%; }
.portfolio-filter-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--carbon); background: transparent; border: 1.5px solid var(--gris-cemento); border-radius: var(--radius-full); cursor: pointer; white-space: nowrap; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.portfolio-filter-btn:hover { border-color: var(--ciruela); color: var(--ciruela); }
.portfolio-filter-btn--active { background: var(--ciruela); border-color: var(--ciruela); color: var(--blanco-hueso); }
.portfolio-filter-btn__count { font-size: var(--text-xs); font-weight: 700; background: rgba(255,255,255,0.2); color: inherit; border-radius: var(--radius-full); padding: 1px 6px; line-height: 1.6; }
.portfolio-filter-btn:not(.portfolio-filter-btn--active) .portfolio-filter-btn__count { background: var(--nude); color: var(--color-texto-claro); }
.portfolio-full__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.portfolio-full__empty { text-align: center; padding-block: var(--space-20); max-width: 540px; margin-inline: auto; }
.portfolio-empty-decoration { position: relative; height: 120px; margin-bottom: var(--space-8); }
.portfolio-empty-deco-circle { position: absolute; border-radius: 50%; left: 50%; transform: translateX(-50%); }
.portfolio-empty-deco-circle--1 { width: 100px; height: 100px; background: var(--nude); top: 10px; }
.portfolio-empty-deco-circle--2 { width: 70px; height: 70px; background: var(--lavanda); top: 30px; margin-left: -40px; opacity: 0.6; }
.portfolio-empty-deco-circle--3 { width: 50px; height: 50px; background: var(--durazno); top: 40px; margin-left: 40px; opacity: 0.5; }
.portfolio-full__empty-title { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 400; color: var(--carbon); margin-bottom: var(--space-4); }
.portfolio-full__empty-text { color: var(--color-texto-claro); margin-bottom: var(--space-8); }
.portfolio-full__empty-filter { text-align: center; padding: var(--space-12); color: var(--color-texto-claro); font-style: italic; }

/* =============================================================================
   25. CONTACTO
   ============================================================================= */

.contact-body__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(var(--space-10), 5vw, var(--space-16)); align-items: start; }
.contact-info__header { margin-bottom: var(--space-8); }
.contact-info__title { font-size: var(--text-3xl); font-weight: 500; color: var(--carbon); margin-bottom: var(--space-3); }
.contact-info__subtitle { color: var(--color-texto-claro); font-size: var(--text-sm); line-height: 1.65; }

.contact-whatsapp-btn { display: flex; align-items: center; gap: var(--space-4); background: #25D366; color: #fff; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-8); transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); box-shadow: 0 4px 16px rgba(37,211,102,0.3); }
.contact-whatsapp-btn:hover { background: #22C55E; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,0.4); color: #fff; }
.contact-whatsapp-btn__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,0.15); border-radius: var(--radius-md); flex-shrink: 0; }
.contact-whatsapp-btn__text { display: flex; flex-direction: column; gap: 2px; }
.contact-whatsapp-btn__text strong { font-size: var(--text-base); font-weight: 700; }
.contact-whatsapp-btn__text span { font-size: var(--text-sm); opacity: 0.85; }

.contact-details { font-style: normal; display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--gris-cemento); }
.contact-detail-item { display: flex; align-items: flex-start; gap: var(--space-4); }
.contact-detail-item__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--nude); color: var(--ciruela); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail-item__content { display: flex; flex-direction: column; gap: var(--space-1); }
.contact-detail-item__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-texto-claro); }
.contact-detail-item__value { font-size: var(--text-base); color: var(--carbon); font-weight: 500; transition: color var(--transition-fast); }
.contact-detail-item__value:hover { color: var(--ciruela); }

.contact-social__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-texto-claro); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-4); }
.contact-social__links { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-social__link { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--carbon); font-weight: 500; transition: color var(--transition-fast); }
.contact-social__link:hover { color: var(--ciruela); }
.contact-social__icon { width: 18px; height: 18px; }

.contact-form-card { background: #fff; border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); box-shadow: var(--shadow-lg); border: 1px solid var(--gris-cemento); }
.contact-form-card__header { margin-bottom: var(--space-8); }
.contact-form-card__title { font-size: var(--text-3xl); font-weight: 500; color: var(--carbon); margin-bottom: var(--space-3); }
.contact-form-card__subtitle { color: var(--color-texto-claro); font-size: var(--text-sm); }
.contact-form-notice { background: var(--nude); border: 1px solid var(--lavanda); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.contact-form-notice p { font-size: var(--text-sm); color: var(--color-texto); margin: 0; line-height: 1.65; }

/* =============================================================================
   26. AVISO DE PRIVACIDAD
   ============================================================================= */

.aviso-content__meta { font-size: var(--text-sm); color: var(--color-texto-claro); margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--gris-cemento); }
.aviso-content__body { margin-bottom: var(--space-12); }
.aviso-arco { background: var(--nude); border-radius: var(--radius-lg); padding: var(--space-8); margin-bottom: var(--space-8); border-left: 3px solid var(--ciruela); }
.aviso-arco__title { font-size: var(--text-xl); font-weight: 600; color: var(--ciruela); margin-bottom: var(--space-4); }
.aviso-back { margin-top: var(--space-8); }

/* =============================================================================
   27. RESPONSIVE — PÁGINAS INTERIORES
   ============================================================================= */

@media (max-width: 1199px) {
    .services-catalog__grid { grid-template-columns: 1fr; }
    .service-card__lists    { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
    .hero-home__inner { grid-template-columns: 1fr; gap: var(--space-12); }
    .hero-home__visual { order: -1; }
    .hero-visual { max-width: 360px; margin-inline: auto; }
    .hero-home__title { font-size: var(--text-4xl); }
    .services-catalog__grid { grid-template-columns: 1fr; }
    .services-process__steps { grid-template-columns: repeat(2, 1fr); }
    .portfolio-full__grid, .portfolio-preview__grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-empty-grid { grid-template-columns: repeat(2, 1fr); }
    .process__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
    .services-preview__grid { grid-template-columns: repeat(2, 1fr); }
    .contact-body__inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .hero-home { min-height: auto; padding-block: var(--space-12) var(--space-16); }
    .hero-home__title { font-size: var(--text-3xl); }
    .hero-home__actions { flex-direction: column; align-items: flex-start; }
    .hero-home__trust { gap: var(--space-4); }
    .portfolio-full__grid, .portfolio-preview__grid { grid-template-columns: 1fr; }
    .portfolio-empty-grid { grid-template-columns: 1fr; }
    .process__grid { grid-template-columns: 1fr; }
    .services-process__steps { grid-template-columns: 1fr; }
    .cta-contact__data { flex-direction: column; align-items: center; }
    .services-preview__grid { grid-template-columns: 1fr; }
    .contact-form-card { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 479px) {
    .hero-home__title { font-size: var(--text-2xl); }
    .cta-contact__title { font-size: var(--text-3xl); }
    .service-card { padding: var(--space-8) var(--space-5); }
}

/* ========================================= */
/* ESTILOS DEL NUEVO PROTOTIPO EDITORIAL V1  */
/* ========================================= */

/* =============================================================================
   STYLES.CSS — Prototipo Visual Home Editorial v1
   Ive Estudio Creativo
   Estilo: Editorial premium · Industrial cálido · Femenino sofisticado
   
   NOTA: Este es un prototipo estático. No modifica el tema WordPress.
   Fuentes: Cormorant Garamond (serif) / Montserrat (sans) via @font-face local.
   Si los .woff2 no están disponibles, los fallbacks Georgia/system-ui mantienen
   la estructura editorial.
   ============================================================================= */


/* =============================================================================
   01. @FONT-FACE — RUTAS RELATIVAS DENTRO DEL PROTOTIPO
   Apuntan a las fuentes locales del tema si están disponibles.
   ============================================================================= */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../../../assets/fonts/cormorant/CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../../../assets/fonts/cormorant/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../../../assets/fonts/cormorant/CormorantGaramond-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../../../assets/fonts/cormorant/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../../../assets/fonts/cormorant/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../../assets/fonts/montserrat/Montserrat-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../../assets/fonts/montserrat/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../../assets/fonts/montserrat/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../../assets/fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../../assets/fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   02. CUSTOM PROPERTIES
   ============================================================================= */

:root {
  /* — PALETA ————————————————————————————————————————————————————————————————— */
  --ciruela:        #5E2C57;
  --ciruela-oscuro: #4a2144;
  --lavanda:        #C7B0C8;
  --lavanda-clara:  #e2d8e3;
  --nude:           #D7C1B6;
  --nude-claro:     #EAD9D0;
  --coral:          #E8A18F;
  --coral-oscuro:   #D98478;
  --durazno:        #F2C2B1;
  --blanco-hueso:   #F7F3EE;
  --gris-cemento:   #D9D3CC;
  --gris-linea:     #E8E2DA;
  --carbon:         #2E2730;
  --carbon-suave:   #3d3240;
  --texto-claro:    #6B5E6A;

  /* — TIPOGRAFÍA ————————————————————————————————————————————————————————————— */
  --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* — ESCALA FLUIDA —————————————————————————————————————————————————————————— */
  --text-xs:    clamp(0.688rem, 0.65rem + 0.19vw, 0.75rem);
  --text-sm:    clamp(0.813rem, 0.77rem + 0.21vw, 0.875rem);
  --text-base:  clamp(0.938rem, 0.90rem + 0.19vw, 1rem);
  --text-md:    clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);
  --text-xl:    clamp(1.375rem, 1.20rem + 0.88vw, 1.875rem);
  --text-2xl:   clamp(1.75rem,  1.40rem + 1.75vw, 2.75rem);
  --text-3xl:   clamp(2.25rem,  1.75rem + 2.5vw,  3.75rem);
  --text-h1:    clamp(2.75rem,  2.10rem + 3.25vw, 4.75rem);

  /* — ESPACIADOS ————————————————————————————————————————————————————————————— */
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* — SECCIÓN ———————————————————————————————————————————————————————————————— */
  --section-py: clamp(var(--sp-16), 7vw, var(--sp-24));

  /* — LAYOUT ————————————————————————————————————————————————————————————————— */
  --container-max: 1240px;
  --container-px:  clamp(var(--sp-6), 5vw, var(--sp-16));
  --header-h:      82px;

  /* — RADIOS ————————————————————————————————————————————————————————————————— */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  12px;

  /* — TRANSICIONES ——————————————————————————————————————————————————————————— */
  --tr-fast:   150ms ease;
  --tr-base:   280ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --tr-slow:   450ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* — SOMBRAS SUTILES ———————————————————————————————————————————————————————— */
  --shadow-sm:  0 1px 3px rgba(46, 39, 48, 0.06);
  --shadow-md:  0 4px 16px rgba(46, 39, 48, 0.07);
}


/* =============================================================================
   03. RESET Y BASE
   ============================================================================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--carbon);
  background-color: var(--blanco-hueso);
  line-height: 1.7;
  overflow-x: hidden;
  /* Textura de papel muy sutil */
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(199,176,200,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(215,193,182,0.06) 0%, transparent 55%);
}

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

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

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

/* Reducir movimiento si usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================================
   04. CONTENEDOR GLOBAL
   ============================================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}


/* =============================================================================
   05. TIPOGRAFÍA GLOBAL
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--carbon);
}

h1 { font-size: var(--text-h1); font-weight: 400; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-xl);  font-weight: 500; }
h4 { font-size: var(--text-lg);  font-weight: 500; }

p {
  color: var(--texto-claro);
  line-height: 1.75;
}

/* Label editorial */
.label-editorial {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.label-editorial::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--coral);
  flex-shrink: 0;
}

/* Subtítulo de sección */
.section-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--texto-claro);
  line-height: 1.7;
  max-width: 56ch;
}

/* Línea decorativa bajo titular */
.title-line {
  width: 36px;
  height: 1.5px;
  background: var(--coral);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* Centrado */
.text-center { text-align: center; }
.title-line--center { margin-inline: auto; }


/* =============================================================================
   06. BOTONES
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.875rem 1.875rem;
  border-radius: var(--r-sm);
  transition: all var(--tr-base);
  white-space: nowrap;
  line-height: 1;
}

/* Botón primario — ciruela sólido */
.btn--primary {
  background: var(--ciruela);
  color: var(--blanco-hueso);
  border: 1.5px solid var(--ciruela);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--ciruela-oscuro);
  border-color: var(--ciruela-oscuro);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(94, 44, 87, 0.22);
}

/* Botón outline — borde ciruela */
.btn--outline {
  background: transparent;
  color: var(--ciruela);
  border: 1.5px solid var(--ciruela);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--ciruela);
  color: var(--blanco-hueso);
  transform: translateY(-1px);
}

/* Botón ghost blanco — para footer/CTA oscuro */
.btn--ghost-white {
  background: transparent;
  color: var(--blanco-hueso);
  border: 1.5px solid rgba(247, 243, 238, 0.45);
}
.btn--ghost-white:hover,
.btn--ghost-white:focus-visible {
  background: rgba(247, 243, 238, 0.1);
  border-color: rgba(247, 243, 238, 0.7);
  transform: translateY(-1px);
}

/* Enlace flecha — editorial */
.link-arrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ciruela);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--tr-base), color var(--tr-fast);
}
.link-arrow::after {
  content: '→';
  font-style: normal;
}
.link-arrow:hover {
  gap: 10px;
  color: var(--coral-oscuro);
}

.link-arrow--small {
  font-size: 0.7rem;
}


/* =============================================================================
   07. HEADER
   ============================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  background: var(--blanco-hueso);
  border-bottom: 1px solid var(--gris-linea);
  transition: box-shadow var(--tr-base);
}

.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(46, 39, 48, 0.07);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--sp-8);
}

/* Logo */
.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: center;
  line-height: 0; /* elimina hueco de baseline inline */
}

.site-logo img {
  width: clamp(145px, 14vw, 178px);
  height: auto;
  display: block;
  /* Ajuste óptico mínimo: compensa espacio transparente superior
     habitual en PNGs de logotipo (máx. permitido: 4–6px) */
  margin-top: -3px;
}

/* Navegación principal */
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-12));
}

.main-nav a {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--carbon-suave);
  position: relative;
  transition: color var(--tr-fast);
  white-space: nowrap;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--coral);
  transition: width var(--tr-base);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--ciruela);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

/* Acciones header derecha */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}

/* CTA header */
.header-cta {
  font-size: 0.68rem;
  padding: 0.7rem 1.4rem;
}

/* Botón hamburguesa — solo en móvil */
.btn-menu {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: background var(--tr-fast);
}

.btn-menu:hover {
  background: var(--lavanda-clara);
}

.btn-menu img {
  width: 22px;
  height: 22px;
}

/* Nav móvil */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--blanco-hueso);
  z-index: 99;
  padding: var(--sp-8) var(--container-px);
  flex-direction: column;
  gap: var(--sp-4);
  overflow-y: auto;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-base), transform var(--tr-base);
}

.mobile-nav.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav a {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carbon);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--gris-linea);
  transition: color var(--tr-fast), padding-left var(--tr-base);
}

.mobile-nav a:hover {
  color: var(--ciruela);
  padding-left: var(--sp-2);
}

.mobile-nav .btn {
  margin-top: var(--sp-6);
  width: 100%;
  justify-content: center;
}


/* =============================================================================
   08. HERO
   ============================================================================= */

.hero-section {
  padding-top: clamp(var(--sp-10), 6vw, var(--sp-16));
  padding-bottom: clamp(var(--sp-16), 8vw, var(--sp-24));
  position: relative;
  overflow: hidden;
}

/* Elemento decorativo fondo — arco sutil */
.hero-section::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 200, 0.22);
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(215, 193, 182, 0.18);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 44% 56%;
  gap: clamp(var(--sp-10), 5vw, var(--sp-20));
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Columna de contenido */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.hero-label {
  /* usa .label-editorial */
}

.hero-h1 {
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: 1.05;
  color: var(--carbon);
  letter-spacing: -0.01em;
}

.hero-h1 em {
  font-style: italic;
  color: var(--ciruela);
}

.hero-divider {
  width: 40px;
  height: 1.5px;
  background: var(--coral);
  margin-top: var(--sp-2);
}

.hero-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--texto-claro);
  line-height: 1.8;
  max-width: 42ch;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Beneficios bajo los botones */
.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-top: var(--sp-2);
}

.hero-benefit {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--carbon-suave);
}

.hero-benefit img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Columna visual del hero */
.hero-visual {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Composición editorial SVG interna */
.hero-composition {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Mockup temporal como composición editorial */
.hero-mockup-wrap {
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}

.hero-mockup-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-lg);
}

/* Marco arquitectónico sutil */
.hero-frame {
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 1px solid rgba(199, 176, 200, 0.32);
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: -1;
}

/* Acento coral en esquina */
.hero-accent-dot {
  position: absolute;
  bottom: 24px;
  left: -12px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nude-claro);
  z-index: 0;
}


/* Composición editorial dentro del hero (cuando no hay foto real) */
.hero-editorial {
  width: 100%;
  height: 100%;
  background: var(--nude-claro);
  border-radius: var(--r-lg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Fondo de la composición */
.hero-editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(199,176,200,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(232,161,143,0.12) 0%, transparent 45%);
}

.editorial-grid {
  position: relative;
  width: 90%;
  height: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}

/* Tarjetas de composición editorial */
.ed-card {
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px;
}

.ed-card-1 {
  background: var(--ciruela);
  grid-row: span 2;
  min-height: 200px;
}

.ed-card-2 {
  background: var(--blanco-hueso);
  border: 1px solid var(--gris-cemento);
}

.ed-card-3 {
  background: var(--nude);
}

/* Textos decorativos editoriales */
.ed-card-label {
  font-family: var(--font-serif);
  font-size: clamp(0.6rem, 1vw, 0.75rem);
  color: rgba(247, 243, 238, 0.7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ed-card-title {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 500;
  color: var(--blanco-hueso);
  line-height: 1.2;
}

.ed-card-2 .ed-card-label {
  color: var(--texto-claro);
}

.ed-card-2 .ed-card-title {
  font-family: var(--font-serif);
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  color: var(--carbon);
}

.ed-card-3 .ed-card-label {
  color: rgba(46, 39, 48, 0.5);
}

.ed-card-3 .ed-card-title {
  font-family: var(--font-serif);
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  color: var(--carbon);
}

/* Líneas decorativas */
.ed-line-h {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 40%;
  height: 1px;
  background: rgba(247, 243, 238, 0.15);
}

/* Paleta de colores mini */
.ed-swatch-row {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}
.ed-swatch {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tag editorial en esquina superior */
.ed-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.6);
  border: 1px solid rgba(247, 243, 238, 0.2);
  padding: 3px 7px;
  border-radius: 100px;
}

.ed-card-2 .ed-tag,
.ed-card-3 .ed-tag {
  color: var(--texto-claro);
  border-color: var(--gris-cemento);
}

/* Detalle coral en la composición */
.ed-coral-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

/* Forma decorativa círculo lavanda grande */
.ed-circle-deco {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid rgba(199,176,200,0.3);
  top: -30px;
  right: -30px;
  pointer-events: none;
}

/* Elemento de retícula - líneas finas */
.ed-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(199,176,200,0.06) 39px, rgba(199,176,200,0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(199,176,200,0.06) 39px, rgba(199,176,200,0.06) 40px);
  pointer-events: none;
}


/* =============================================================================
   09. SERVICIOS DESTACADOS
   ============================================================================= */

.servicios-section {
  padding-block: var(--section-py);
  background: var(--blanco-hueso);
  position: relative;
  overflow: hidden;
}

/* Detalle arquitectónico lateral derecho */
.servicios-section::after {
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(232, 161, 143, 0.2);
  pointer-events: none;
}

.servicios-header {
  text-align: center;
  margin-bottom: clamp(var(--sp-12), 5vw, var(--sp-20));
}

/* Grid editorial de servicios — 4 columnas */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gris-linea);
  border: 1px solid var(--gris-linea);
  border-radius: var(--r-md);
  overflow: hidden;
}

.servicio-item {
  background: var(--blanco-hueso);
  padding: clamp(var(--sp-8), 3.5vw, var(--sp-10)) clamp(var(--sp-6), 2.5vw, var(--sp-8));
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  transition: background var(--tr-base);
  position: relative;
}

.servicio-item:hover {
  background: #fbf8f5;
}

/* Número editorial */
.servicio-num {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--lavanda);
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
}

/* Icono del servicio */
.servicio-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.servicio-icon img,
.servicio-icon svg {
  width: 52px;
  height: 52px;
}

/* Separador micro */
.servicio-sep {
  width: 24px;
  height: 1px;
  background: var(--coral);
  opacity: 0.6;
}

.servicio-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--carbon);
  line-height: 1.25;
}

.servicio-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--texto-claro);
  line-height: 1.7;
  flex-grow: 1;
}

.servicio-link {
  margin-top: auto;
}

/* CTA final servicios */
.servicios-cta {
  text-align: center;
  margin-top: clamp(var(--sp-10), 4vw, var(--sp-16));
}


/* =============================================================================
   10. PORTAFOLIO DESTACADO
   ============================================================================= */

.portafolio-section {
  padding-block: var(--section-py);
  background: var(--nude-claro);
  position: relative;
}

/* Retícula sutil de fondo */
.portafolio-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(215,193,182,0.15) 79px, rgba(215,193,182,0.15) 80px);
  pointer-events: none;
}

.portafolio-header {
  text-align: center;
  margin-bottom: clamp(var(--sp-10), 4vw, var(--sp-16));
  position: relative;
  z-index: 1;
}

/* Grid portafolio — 3 columnas, 2 filas */
.portafolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
  position: relative;
  z-index: 1;
}

.proyecto-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--blanco-hueso);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--tr-base), box-shadow var(--tr-base);
}

.proyecto-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Imagen del proyecto */
.proyecto-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--nude);
}

.proyecto-img-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-slow);
}

.proyecto-card:hover .proyecto-img-inner {
  transform: scale(1.03);
}

/* Composición editorial cuando no hay foto */
.proyecto-editorial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Datos del proyecto */
.proyecto-body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.proyecto-categoria {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavanda);
}

.proyecto-titulo {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--carbon);
  line-height: 1.2;
}

/* CTA portafolio */
.portafolio-cta {
  text-align: center;
  margin-top: clamp(var(--sp-10), 4vw, var(--sp-16));
  position: relative;
  z-index: 1;
}


/* =============================================================================
   11. PROCESO
   ============================================================================= */

.proceso-section {
  padding-block: var(--section-py);
  background: var(--blanco-hueso);
  position: relative;
  overflow: hidden;
}

.proceso-section::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 200, 0.15);
  pointer-events: none;
}

.proceso-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--sp-10), 6vw, var(--sp-20));
  align-items: start;
}

.proceso-intro {
  max-width: 220px;
  flex-shrink: 0;
}

.proceso-intro-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}

.proceso-intro-text {
  font-size: var(--text-sm);
  color: var(--texto-claro);
  line-height: 1.75;
}

/* Grid de pasos */
.proceso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* Línea conectora */
.proceso-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gris-linea);
  z-index: 0;
}

.proceso-step {
  padding: var(--sp-6);
  padding-top: 0;
  position: relative;
  z-index: 1;
}

/* Número y icono */
.proceso-step-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.proceso-num {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--lavanda);
  line-height: 1;
  min-width: 36px;
}

.proceso-icon {
  width: 32px;
  height: 32px;
}

.proceso-icon img {
  width: 32px;
  height: 32px;
}

.proceso-step-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--carbon);
  margin-bottom: var(--sp-3);
  line-height: 1.2;
}

.proceso-step-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--texto-claro);
  line-height: 1.7;
}

/* Divisor vertical entre pasos */
.proceso-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: var(--gris-linea);
}


/* =============================================================================
   12. CTA FINAL
   ============================================================================= */

.cta-final-section {
  padding-block: var(--section-py);
  background: var(--ciruela);
  position: relative;
  overflow: hidden;
}

/* Arcos decorativos en fondo */
.cta-final-section::before {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 200, 0.12);
  pointer-events: none;
}

.cta-final-section::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 238, 0.07);
  pointer-events: none;
}

.cta-final-inner {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: clamp(var(--sp-10), 5vw, var(--sp-20));
  align-items: start;
  position: relative;
  z-index: 1;
}

.cta-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.cta-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--coral);
}

.cta-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--blanco-hueso);
  line-height: 1.1;
  margin-bottom: var(--sp-5);
}

.cta-title em {
  font-style: italic;
  color: var(--lavanda);
}

.cta-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: rgba(247, 243, 238, 0.7);
  line-height: 1.75;
  max-width: 52ch;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: stretch;
  min-width: 220px;
}

.cta-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Botón coral en CTA final */
.btn--coral {
  background: var(--coral);
  color: var(--blanco-hueso);
  border: 1.5px solid var(--coral);
}
.btn--coral:hover {
  background: var(--coral-oscuro);
  border-color: var(--coral-oscuro);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 161, 143, 0.3);
}


/* =============================================================================
   13. FOOTER
   ============================================================================= */

.site-footer {
  background: var(--ciruela);
  padding-top: clamp(var(--sp-12), 5vw, var(--sp-20));
  padding-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
}

/* Detalle decorativo arquitectónico */
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(199, 176, 200, 0.2);
}

.site-footer::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 200, 0.08);
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  padding-bottom: clamp(var(--sp-10), 4vw, var(--sp-16));
  border-bottom: 1px solid rgba(199, 176, 200, 0.15);
}

/* Columna 1 — Marca */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.footer-logo img {
  width: clamp(120px, 11vw, 155px);
  height: auto;
  /* El logo en PNG no se ve bien sobre ciruela oscuro,
     aplicamos filtro para adaptarlo a fondo oscuro */
  filter: brightness(0) invert(1) opacity(0.85);
}

.footer-tagline {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  color: rgba(247, 243, 238, 0.65);
}

/* Columnas de navegación/servicios */
.footer-col-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavanda);
  margin-bottom: var(--sp-5);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-links a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(247, 243, 238, 0.6);
  transition: color var(--tr-fast);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--blanco-hueso);
}

/* Columna contacto */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(247, 243, 238, 0.6);
  margin-bottom: var(--sp-3);
}

.footer-contact-item span {
  color: var(--lavanda);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  min-width: 60px;
}

/* Barra inferior */
.footer-bottom {
  padding-top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-copy {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(247, 243, 238, 0.35);
}

.footer-legal {
  display: flex;
  gap: var(--sp-6);
}

.footer-legal a {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(247, 243, 238, 0.35);
  transition: color var(--tr-fast);
}

.footer-legal a:hover {
  color: rgba(247, 243, 238, 0.7);
}


/* =============================================================================
   14. COMPOSICIONES EDITORIALES — PROYECTOS (placeholders visuales con SVG)
   ============================================================================= */

/* Cada proyecto tiene un color de fondo editorial y texto tipográfico */
.proyecto-comp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.proyecto-comp--1 { background: linear-gradient(145deg, #5E2C57 0%, #4a2144 100%); }
.proyecto-comp--2 { background: linear-gradient(145deg, #D7C1B6 0%, #C9ADA0 100%); }
.proyecto-comp--3 { background: linear-gradient(145deg, #EAD9D0 0%, #D9C5BB 100%); }
.proyecto-comp--4 { background: linear-gradient(145deg, #C7B0C8 0%, #B49EB5 100%); }
.proyecto-comp--5 { background: linear-gradient(145deg, #F2C2B1 0%, #E8A18F 100%); }
.proyecto-comp--6 { background: linear-gradient(145deg, #2E2730 0%, #3d3240 100%); }

.proyecto-comp-text {
  position: relative;
  z-index: 2;
}

.proyecto-comp-mark {
  font-family: var(--font-serif);
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.proyecto-comp-name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.15;
  display: block;
}

/* Colores de texto según fondo */
.proyecto-comp--1 .proyecto-comp-mark,
.proyecto-comp--6 .proyecto-comp-mark { color: rgba(247,243,238,0.55); }
.proyecto-comp--1 .proyecto-comp-name,
.proyecto-comp--6 .proyecto-comp-name { color: var(--blanco-hueso); }

.proyecto-comp--2 .proyecto-comp-mark,
.proyecto-comp--3 .proyecto-comp-mark { color: rgba(46,39,48,0.5); }
.proyecto-comp--2 .proyecto-comp-name,
.proyecto-comp--3 .proyecto-comp-name { color: var(--carbon); }

.proyecto-comp--4 .proyecto-comp-mark { color: rgba(46,39,48,0.5); }
.proyecto-comp--4 .proyecto-comp-name { color: var(--carbon); }

.proyecto-comp--5 .proyecto-comp-mark { color: rgba(247,243,238,0.6); }
.proyecto-comp--5 .proyecto-comp-name { color: var(--blanco-hueso); }

/* Detalle geométrico en composiciones */
.proyecto-comp-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
}

.proyecto-comp-line {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
}


/* =============================================================================
   15. ANIMACIONES DE ENTRADA
   ============================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.65s cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }


/* =============================================================================
   16. UTILIDADES
   ============================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.no-scroll { overflow: hidden; }


/* =============================================================================
   17. MEDIA QUERIES
   ============================================================================= */

/* ── TABLET (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {

  .main-nav { display: none; }
  .btn-menu  { display: flex; }

  /* Hero — apilado */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .hero-visual {
    aspect-ratio: 16/9;
    max-width: 640px;
    margin-inline: auto;
  }

  .hero-h1 { font-size: clamp(2.4rem, 6vw, 3.5rem); }

  /* Servicios — 2 columnas */
  .servicios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Proceso — 2+2 */
  .proceso-inner {
    grid-template-columns: 1fr;
  }

  .proceso-intro {
    max-width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-8);
    align-items: start;
  }

  .proceso-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .proceso-grid::before { display: none; }

  .proceso-step::after { display: none; }

  .proceso-step {
    padding: var(--sp-6);
    border-bottom: 1px solid var(--gris-linea);
  }

  /* CTA final — apilado */
  .cta-final-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .cta-actions {
    flex-direction: row;
    min-width: auto;
  }

  .cta-actions .btn { width: auto; }

  /* Footer — 2 columnas */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
  }
}


/* ── MÓVIL (≤ 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {

  :root { --header-h: 68px; }

  .header-cta { display: none; }
  .hero-section { padding-top: var(--sp-10); }
  .hero-visual { aspect-ratio: 4/3; }
  .hero-h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-benefits { gap: var(--sp-4); }

  .servicios-grid { grid-template-columns: 1fr; }

  /* Portafolio — apilado */
  .portafolio-grid--3 { grid-template-columns: 1fr; }
  .portafolio-col-secondary { display: contents; }

  .proceso-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
}


/* =============================================================================
   18. HERO MOSAICO — composición editorial 2×2 (nuevo)
   Evoca: tarjeta corporativa, paleta de marca, libreta, etiqueta.
   Cada pieza es un slot reemplazable por fotografía real.
   ============================================================================= */

/* Contenedor principal del mosaico */
.hero-mosaic {
  width: 100%;
  height: 100%;
  min-height: 460px;
  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: 52% 48%;
  gap: 10px;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}

/* Pieza base */
.mosaic-piece {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

/* Asignación de piezas al grid */
.mosaic-a { grid-column: 1; grid-row: 1 / span 2; } /* izq, ocupa 2 filas */
.mosaic-b { grid-column: 2; grid-row: 1; }           /* der arriba — paleta */
.mosaic-c { grid-column: 1; grid-row: 1; }           /* oculto — cubierto por mosaic-a span */
.mosaic-d { grid-column: 2; grid-row: 2; }           /* der abajo — etiqueta */

/* Fondos */
.mosaic-bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(14px, 2vw, 22px);
  position: relative;
  overflow: hidden;
}

.mosaic-bg--ciruela { background: var(--ciruela); }
.mosaic-bg--hueso   { background: var(--blanco-hueso); border: 1px solid var(--gris-linea); }
.mosaic-bg--nude    { background: var(--nude-claro); }
.mosaic-bg--lavanda { background: var(--lavanda-clara); }

/* Arco interior decorativo (pieza A) */
.mosaic-inner-arc {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 200, 0.18);
  pointer-events: none;
}

/* Tipografía interna */
.mosaic-micro {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  color: rgba(199, 176, 200, 0.65);
}

.mosaic-eyebrow {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 400;
  color: var(--blanco-hueso);
  display: block;
}

.mosaic-label-stack {
  position: relative;
  z-index: 2;
  margin-bottom: var(--sp-3);
}

.mosaic-logo-mark {
  position: relative;
  z-index: 2;
}

/* Punto decorativo */
.mosaic-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mosaic-dot--coral { background: var(--coral); }
.mosaic-dot--white { background: rgba(247, 243, 238, 0.5); }

/* ── Pieza B: Paleta de color ────────────────────────── */
.mosaic-palette-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 26px;
}

.palette-chip {
  width: 100%;
  min-height: 8px;
}

.mosaic-b-label {
  position: absolute;
  bottom: clamp(10px, 1.5vw, 18px);
  left: clamp(34px, 4vw, 44px);
  right: clamp(8px, 1vw, 12px);
}

.mosaic-b-label .mosaic-micro {
  color: var(--texto-claro);
}

.mosaic-b-label .mosaic-eyebrow {
  color: var(--carbon);
  font-size: clamp(0.8rem, 1.3vw, 1rem);
}

/* ── Pieza C: Libreta / agenda (ahora dentro de mosaic-a scope) ── */
/* Pieza C está anidada dentro del layout y cubierta por mosaic-a span 2.
   Su rol lo cumple la propia pieza A extendida.
   Se mantiene el CSS por si se ajusta el grid en futuro. */
.mosaic-book-cover {
  display: flex;
  height: 100%;
  gap: 8px;
  align-items: stretch;
}

.book-spine {
  width: 12px;
  background: var(--ciruela);
  border-radius: 2px 0 0 2px;
  flex-shrink: 0;
}

.book-face {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  background: var(--nude);
  border-radius: 0 4px 4px 0;
}

.book-title-line {
  display: block;
  height: 2px;
  width: 80%;
  background: var(--ciruela);
  opacity: 0.25;
  border-radius: 1px;
}

.book-byline {
  font-family: var(--font-serif);
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  font-style: italic;
  color: var(--ciruela);
  opacity: 0.7;
  margin-top: auto;
  display: block;
}

.book-logo-mini {
  margin-top: var(--sp-2);
}

/* ── Pieza D: Etiqueta / Tag artesanal ──────────────── */
.mosaic-tag-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

.tag-hole {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(94, 44, 87, 0.3);
  background: var(--lavanda-clara);
  box-shadow: inset 0 0 0 2px rgba(94, 44, 87, 0.1);
  flex-shrink: 0;
}

.tag-body {
  background: var(--blanco-hueso);
  border: 1px solid var(--gris-linea);
  border-radius: var(--r-sm);
  padding: clamp(10px, 1.5vw, 16px) clamp(12px, 1.8vw, 18px);
  text-align: center;
  width: 85%;
  flex-shrink: 0;
}

.tag-text-sm {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavanda);
  display: block;
  margin-bottom: 4px;
}

.tag-text-lg {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  font-weight: 500;
  color: var(--carbon);
  display: block;
  line-height: 1.2;
}

.tag-text-xs {
  font-family: var(--font-serif);
  font-size: 0.6rem;
  font-style: italic;
  color: var(--texto-claro);
  display: block;
  margin-top: 6px;
}

.tag-line {
  width: 28px;
  height: 1px;
  background: var(--coral);
  margin: 8px auto 0;
  opacity: 0.6;
}


/* =============================================================================
   19. PORTAFOLIO — Layout asimétrico 3 proyectos (nuevo)
   ============================================================================= */

/* Grid asimétrico: proyecto grande izq + col 2 proyectos apilados der */
.portafolio-grid--3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Columna secundaria — 2 proyectos apilados */
.portafolio-col-secondary {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 22px);
}

/* Proyecto grande (featured) */
.proyecto-card--featured .proyecto-img {
  aspect-ratio: 3/4; /* más alto que ancho — editorial */
}

/* El proyecto-card ya tiene estilos base. Solo ajustes para los slots internos */
.proyecto-img-link {
  display: block;
  text-decoration: none;
}

.proyecto-img-link:focus-visible .proyecto-img {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* ── Composiciones de proyectos ─────────────────────── */

/* Base compartida */
.proyecto-comp {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2.5vw, 24px);
  overflow: hidden;
}

.pc-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Proyecto Identidad de marca ── */
.proyecto-comp--identidad .pc-bg {
  background: linear-gradient(155deg, var(--ciruela) 0%, #4a2144 100%);
}

/* Arco decorativo grande */
.pc-arc {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(199, 176, 200, 0.15);
  top: -60px;
  right: -60px;
  pointer-events: none;
}

/* Tarjeta simulada dentro del proyecto */
.pc-card-sim {
  position: relative;
  z-index: 2;
  background: rgba(247, 243, 238, 0.06);
  border: 1px solid rgba(247, 243, 238, 0.12);
  border-radius: var(--r-sm);
  padding: clamp(14px, 2vw, 20px);
  margin-bottom: var(--sp-5);
  backdrop-filter: blur(2px);
}

.pc-card-logo {
  margin-bottom: 12px;
}

.pc-card-rule {
  height: 1px;
  background: rgba(199, 176, 200, 0.25);
  margin-bottom: 10px;
}

.pc-card-detail {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(199, 176, 200, 0.55);
  text-transform: uppercase;
}

/* Paleta de swatches */
.pc-swatches {
  display: flex;
  gap: 5px;
  position: relative;
  z-index: 2;
}

.pc-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 238, 0.15);
  flex-shrink: 0;
}

/* ── Proyecto Papelería ── */
.proyecto-comp--papeleria .pc-bg {
  background: linear-gradient(145deg, #EAD9D0 0%, #D9C5BB 100%);
}

.pc-paper-lines {
  position: absolute;
  top: 30%;
  left: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 14px);
  pointer-events: none;
}

.pc-line {
  height: 1.5px;
  width: 100%;
  background: rgba(94, 44, 87, 0.12);
  border-radius: 1px;
}
.pc-line--short { width: 65%; }

/* Esquina doblada */
.pc-corner-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 0;
  border-color: transparent var(--nude-claro) transparent transparent;
  pointer-events: none;
}

/* Label del proyecto papelería */
.pc-papeleria-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pc-cat {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(46, 39, 48, 0.45);
  display: block;
}

.pc-name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 500;
  color: var(--carbon);
  line-height: 1.15;
  display: block;
}

/* ── Proyecto Packaging ── */
.proyecto-comp--packaging .pc-bg {
  background: linear-gradient(145deg, var(--coral) 0%, #D47E6D 100%);
}

/* Forma de caja */
.pc-box-shape {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.pc-box-face {
  width: 70%;
  aspect-ratio: 1;
  background: rgba(247, 243, 238, 0.08);
  border: 1px solid rgba(247, 243, 238, 0.2);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.5vw, 16px);
  text-align: center;
  position: relative;
}

.pc-ribbon {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: rgba(247, 243, 238, 0.5);
}

.pc-ribbon::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(247, 243, 238, 0.6);
}

.pc-box-label {
  position: relative;
  z-index: 1;
}

/* Punto accent */
.pc-dot-accent {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(247, 243, 238, 0.5);
}


/* =============================================================================
   20. RESPONSIVE — Ajustes para componentes nuevos
   ============================================================================= */

@media (max-width: 1024px) {

  /* Hero mosaic — proporción tablet */
  .hero-visual {
    aspect-ratio: 16/10;
  }

  /* Portafolio 3 cols — en tablet se apila todo a 1 col */
  .portafolio-grid--3 {
    grid-template-columns: 1fr;
  }

  .portafolio-col-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .proyecto-card--featured .proyecto-img {
    aspect-ratio: 16/9;
  }
}

@media (max-width: 640px) {

  /* Mosaic hero — más compacto */
  .hero-mosaic {
    grid-template-columns: 55% 45%;
    grid-template-rows: 55% 45%;
    gap: 7px;
  }

  /* Portafolio — todo a 1 columna */
  .portafolio-grid--3 {
    grid-template-columns: 1fr;
  }

  .portafolio-col-secondary {
    display: flex;
    flex-direction: column;
  }

  .proyecto-card--featured .proyecto-img {
    aspect-ratio: 4/3;
  }
}


/* Fix header vertical alignment */
.site-header .container { height: 100%; }


/* ========================================= */
/* ESTILOS DEL PROTOTIPO SERVICIOS V1        */
/* ========================================= */

/* =============================================================================
   STYLES.CSS — Prototipo Servicios Editorial v1
   Ive Estudio Creativo
   Sistema de diseno identico al Home v2 aprobado.
   ============================================================================= */

/* =============================================================================
   01. TOKENS DE DISENO
   ============================================================================= */
:root {
  --ciruela:       #5E2C57;
  --ciruela-osc:   #4a2144;
  --coral:         #C77B6B;
  --coral-osc:     #b56a5a;
  --lavanda:       #C7B0C8;
  --lavanda-clara: #EDE5EE;
  --nude:          #D7C1B6;
  --nude-claro:    #EDE3DC;
  --carbon:        #2E2730;
  --blanco-hueso:  #F7F3EE;
  --texto-claro:   #6B6070;
  --gris-linea:    #E8E2DC;
  --font-serif:    "Cormorant Garamond", Georgia, serif;
  --font-sans:     "DM Sans", system-ui, sans-serif;
  --text-xs:   0.72rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-h1:   clamp(2.8rem, 5.5vw, 4rem);
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
  --container-max: 1200px;
  --container-px:  clamp(var(--sp-6), 5vw, var(--sp-16));
  --header-h: 82px;
  --r-sm: 3px; --r-md: 6px; --r-lg: 12px;
  --tr-fast: 150ms ease;
  --tr-base: 280ms cubic-bezier(0.25,0.1,0.25,1);
  --tr-slow: 450ms cubic-bezier(0.25,0.1,0.25,1);
  --shadow-sm: 0 1px 3px rgba(46,39,48,0.06);
  --shadow-md: 0 4px 16px rgba(46,39,48,0.07);
}

/* =============================================================================
   02. RESET Y BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--carbon); background: var(--blanco-hueso); line-height: 1.7;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
   03. CONTENEDOR
   ============================================================================= */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }

/* =============================================================================
   04. TIPOGRAFIA
   ============================================================================= */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; color: var(--carbon); }
h1 { font-size: var(--text-h1); font-weight: 400; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-xl); font-weight: 500; }
p { color: var(--texto-claro); line-height: 1.75; }

.label-editorial {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.label-editorial::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--coral); flex-shrink: 0; }
.label-editorial--clara { color: rgba(247,243,238,0.7); }
.label-editorial--clara::before { background: rgba(247,243,238,0.5); }

.title-line { width: 36px; height: 1.5px; background: var(--coral); margin-top: var(--sp-3); margin-bottom: var(--sp-6); }

/* =============================================================================
   05. BOTONES
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.875rem 1.875rem; border-radius: var(--r-sm);
  transition: all var(--tr-base); white-space: nowrap; line-height: 1;
}
.btn--primary { background: var(--ciruela); color: var(--blanco-hueso); border: 1.5px solid var(--ciruela); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--ciruela-osc); border-color: var(--ciruela-osc); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(94,44,87,0.22); }
.btn--outline { background: transparent; color: var(--ciruela); border: 1.5px solid var(--ciruela); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--ciruela); color: var(--blanco-hueso); transform: translateY(-1px); }
.btn--blanco { background: var(--blanco-hueso); color: var(--ciruela); border: 1.5px solid var(--blanco-hueso); }
.btn--blanco:hover, .btn--blanco:focus-visible { background: transparent; color: var(--blanco-hueso); transform: translateY(-1px); }

/* =============================================================================
   06. FONDOS
   ============================================================================= */
.bg-hueso { background: var(--blanco-hueso); }
.bg-nude { background: var(--nude-claro); }
.bg-ciruela-light { background: rgba(94,44,87,0.06); }
.bg-lavanda-light { background: var(--lavanda-clara); }

/* =============================================================================
   07. HEADER
   ============================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100; width: 100%;
  height: var(--header-h); background: var(--blanco-hueso);
  border-bottom: 1px solid var(--gris-linea); transition: box-shadow var(--tr-base);
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(46,39,48,0.07); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--sp-8); }
.site-logo { flex-shrink: 0; display: flex; align-items: center; align-self: center; line-height: 0; }
.site-logo img { width: clamp(145px,14vw,178px); height: auto; display: block; margin-top: -3px; }
.site-logo-fallback { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ciruela); }
.main-nav { display: flex; align-items: center; gap: clamp(var(--sp-6),3.5vw,var(--sp-12)); flex: 1; justify-content: center; }
.main-nav a { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-claro); position: relative; transition: color var(--tr-fast); padding-bottom: 2px; }
.main-nav a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--ciruela); transition: width var(--tr-base); }
.main-nav a:hover, .main-nav a.active { color: var(--ciruela); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }
.header-cta { font-size: 0.68rem; padding: 0.7rem 1.4rem; }
.btn-menu { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--r-sm); transition: background var(--tr-fast); }
.btn-menu:hover { background: var(--gris-linea); }

/* Mobile nav */
.mobile-nav { display: none; position: fixed; inset: 0; top: var(--header-h); background: var(--blanco-hueso); z-index: 99; padding: var(--sp-8) var(--container-px); flex-direction: column; gap: var(--sp-6); border-top: 1px solid var(--gris-linea); }
.mobile-nav.open { display: flex; }
.mobile-nav-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.mobile-nav-list a { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--carbon); padding: var(--sp-2) 0; border-bottom: 1px solid var(--gris-linea); }
.mobile-nav-list a.active { color: var(--ciruela); }
.header-cta--mobile { margin-top: var(--sp-4); width: 100%; justify-content: center; }


/* =============================================================================
   08. HERO SERVICIOS
   ============================================================================= */
.hero-servicios {
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-16);
  background: var(--blanco-hueso);
  position: relative;
  overflow: hidden;
}
.hero-servicios::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse at 80% 30%, rgba(199,176,200,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.hero-s-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-12),6vw,var(--sp-20));
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-s-texto { display: flex; flex-direction: column; gap: var(--sp-6); }
.hero-s-h1 { font-size: var(--text-h1); font-weight: 400; line-height: 1.08; margin-top: var(--sp-4); }
.hero-s-h1 em { font-style: italic; color: var(--ciruela); }
.hero-s-desc { font-size: var(--text-lg); line-height: 1.75; max-width: 52ch; }
.hero-s-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }
.hero-rule { width: 100%; height: 1px; background: var(--gris-linea); margin-top: var(--sp-16); }

/* Visual hero servicios — composicion editorial 2x2 */
.hero-s-visual { position: relative; }
.hero-comp-s {
  width: 100%;
  aspect-ratio: 4/3;
  display: grid;
  grid-template-columns: 58% 42%;
  grid-template-rows: 55% 45%;
  gap: 10px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hcs-pieza { border-radius: var(--r-md); overflow: hidden; position: relative; }
.hcs-a { grid-column: 1; grid-row: 1 / span 2; }
.hcs-b { grid-column: 2; grid-row: 1; }
.hcs-c { grid-column: 1; grid-row: 2; display: none; }
.hcs-d { grid-column: 2; grid-row: 2; }

/* Pieza A — Libreta (hueso calido) */
.hcs-libreta { display: flex; height: 100%; }
.hcs-lomo { width: 14px; background: var(--ciruela); flex-shrink: 0; }
.hcs-cara {
  flex: 1; background: var(--nude-claro); display: flex; flex-direction: column;
  justify-content: flex-end; padding: clamp(14px,2vw,22px); gap: 6px;
}
.hcs-linea { display: block; height: 1.5px; background: rgba(94,44,87,0.15); border-radius: 1px; width: 80%; }
.hcs-linea--md { width: 60%; }
.hcs-linea--sm { width: 45%; }
.hcs-byline { font-family: var(--font-serif); font-size: clamp(0.65rem,1vw,0.85rem); font-style: italic; color: var(--ciruela); opacity: 0.7; margin-top: var(--sp-2); }

/* Pieza B — Etiqueta packaging */
.hcs-etiqueta {
  width: 100%; height: 100%; background: var(--lavanda-clara);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: clamp(10px,1.5vw,18px); text-align: center; gap: 3px;
}
.hcs-et-cat { font-family: var(--font-sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavanda); display: block; }
.hcs-et-titulo { font-family: var(--font-serif); font-size: clamp(0.8rem,1.4vw,1.05rem); font-weight: 500; color: var(--carbon); display: block; }
.hcs-et-sub { font-family: var(--font-serif); font-size: clamp(0.7rem,1.2vw,0.9rem); color: var(--texto-claro); display: block; }
.hcs-et-line { width: 24px; height: 1px; background: var(--coral); margin: 6px auto 0; opacity: 0.7; }

/* Pieza C — Caja regalo (coral) */
.hcs-caja-bg {
  width: 100%; height: 100%; background: var(--coral);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; position: relative;
}
.hcs-caja-inner { position: relative; width: 65%; aspect-ratio: 1; border: 1.5px solid rgba(247,243,238,0.35); border-radius: var(--r-sm); }
.hcs-ribbon-h { position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; background: rgba(247,243,238,0.5); transform: translateY(-50%); }
.hcs-ribbon-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: rgba(247,243,238,0.5); transform: translateX(-50%); }
.hcs-caja-label { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,243,238,0.7); margin-top: 10px; display: block; }

/* Pieza D — Tarjeta digital (ciruela oscuro) */
.hcs-tarjeta-dig { width: 100%; height: 100%; background: var(--ciruela); display: flex; flex-direction: column; }
.hcs-td-header { height: 35%; background: rgba(247,243,238,0.08); border-bottom: 1px solid rgba(247,243,238,0.1); }
.hcs-td-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(10px,1.5vw,14px); gap: 6px; }
.hcs-td-line { height: 1.5px; background: rgba(199,176,200,0.35); border-radius: 1px; width: 75%; }
.hcs-td-line--sm { width: 50%; }

/* =============================================================================
   09. NAVEGADOR DE CATEGORIAS
   ============================================================================= */
.categorias-section {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--gris-linea);
  background: var(--blanco-hueso);
}
.cats-label { margin-bottom: var(--sp-8); display: block; }
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--sp-2);
}
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-2); border-radius: var(--r-md);
  text-align: center; transition: all var(--tr-base);
  border: 1px solid transparent;
}
.cat-item:hover, .cat-item:focus-visible {
  background: var(--blanco-hueso); border-color: var(--gris-linea);
  box-shadow: var(--shadow-sm); transform: translateY(-2px);
}
.cat-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(94,44,87,0.05); border-radius: var(--r-md); padding: 10px; transition: background var(--tr-fast); }
.cat-item:hover .cat-icon { background: rgba(94,44,87,0.10); }
.cat-label { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.06em; color: var(--texto-claro); line-height: 1.4; }
.cat-item:hover .cat-label { color: var(--ciruela); }

/* =============================================================================
   10. BLOQUES DE SERVICIO
   ============================================================================= */
.servicios-detalle { position: relative; }

.sv-bloque {
  padding: clamp(var(--sp-16),6vw,var(--sp-24)) 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--gris-linea);
}
.sv-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-12),7vw,var(--sp-20));
  align-items: center;
  position: relative;
  z-index: 2;
}
.sv-inner--rev { direction: rtl; }
.sv-inner--rev > * { direction: ltr; }

.sv-texto { display: flex; flex-direction: column; gap: var(--sp-5); }
.sv-header { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.sv-num-grande { font-family: var(--font-serif); font-size: clamp(3rem,5vw,4.5rem); font-weight: 300; color: rgba(94,44,87,0.12); line-height: 1; letter-spacing: -0.02em; }
.sv-icon-wrap { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(94,44,87,0.06); border-radius: var(--r-md); padding: 10px; margin-top: 8px; }
.sv-titulo { font-size: clamp(1.75rem,3.5vw,2.5rem); font-weight: 500; line-height: 1.15; }
.sv-desc { font-size: var(--text-base); max-width: 52ch; }
.sv-detalles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-2); }
.sv-det-titulo { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ciruela); margin-bottom: var(--sp-3); display: block; }
.sv-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.sv-lista li { font-size: var(--text-sm); color: var(--texto-claro); line-height: 1.5; padding-left: 14px; position: relative; }
.sv-lista li::before { content: "—"; position: absolute; left: 0; color: var(--coral); font-size: 0.7rem; }
.sv-lista--tags { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
.sv-lista--tags li { background: rgba(94,44,87,0.06); border-radius: 100px; padding: 4px 12px; font-size: 0.7rem; font-weight: 500; color: var(--ciruela); padding-left: 12px; }
.sv-lista--tags li::before { display: none; }
.sv-beneficio { font-family: var(--font-serif); font-size: var(--text-base); color: var(--texto-claro); border-left: 2px solid var(--coral); padding-left: var(--sp-4); margin-top: var(--sp-2); }
.sv-cta { margin-top: var(--sp-4); align-self: flex-start; }
.sv-watermark {
  position: absolute; right: clamp(-20px,-3vw,0px); top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif); font-size: clamp(6rem,15vw,14rem);
  font-weight: 300; color: rgba(94,44,87,0.04); line-height: 1;
  pointer-events: none; user-select: none; z-index: 1;
}

/* =============================================================================
   11. VISUALES CSS — COMPOSICIONES POR SERVICIO
   ============================================================================= */
.sv-visual {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sv-comp {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(20px,3vw,36px);
  position: relative; overflow: hidden;
}

/* Branding */
.sv-comp--branding { background: linear-gradient(155deg, var(--ciruela) 0%, var(--ciruela-osc) 100%); }
.sv-arc { position: absolute; border-radius: 50%; border: 1px solid rgba(199,176,200,0.15); pointer-events: none; }
.sv-arc--1 { width: 250px; height: 250px; top: -80px; right: -80px; }
.sv-arc--2 { width: 160px; height: 160px; bottom: -40px; left: -40px; border-color: rgba(199,176,200,0.08); }
.sv-tarjeta { background: rgba(247,243,238,0.07); border: 1px solid rgba(247,243,238,0.12); border-radius: var(--r-sm); padding: clamp(16px,2.5vw,24px); width: 80%; backdrop-filter: blur(2px); position: relative; z-index: 2; }
.sv-tarjeta-logo { display: flex; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.svtl-serif { font-family: var(--font-serif); font-size: clamp(1.1rem,2vw,1.5rem); color: var(--blanco-hueso); font-weight: 300; }
.svtl-sans { font-family: var(--font-sans); font-size: clamp(0.8rem,1.4vw,1.1rem); color: var(--blanco-hueso); font-weight: 300; letter-spacing: 0.1em; }
.sv-tarjeta-rule { height: 1px; background: rgba(199,176,200,0.25); margin-bottom: 8px; }
.sv-tarjeta-sub { font-family: var(--font-serif); font-size: clamp(0.65rem,1vw,0.8rem); font-style: italic; color: rgba(199,176,200,0.6); }
.sv-swatches { display: flex; gap: 6px; margin-top: var(--sp-4); position: relative; z-index: 2; }
.sv-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(247,243,238,0.2); flex-shrink: 0; }

/* Digital */
.sv-comp--digital { background: var(--lavanda-clara); flex-direction: column; gap: 12px; }
.sv-disp-frame { width: 80%; background: var(--blanco-hueso); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.sv-disp-screen { padding: 12px; }
.sv-post-sim { display: flex; flex-direction: column; gap: 6px; }
.sv-post-hdr { height: 6px; background: rgba(94,44,87,0.15); border-radius: 3px; width: 40%; }
.sv-post-img-sim { height: 60px; background: linear-gradient(135deg, var(--nude-claro) 0%, var(--lavanda-clara) 100%); border-radius: var(--r-sm); }
.sv-post-lines { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.sv-post-lines div { height: 4px; background: rgba(94,44,87,0.10); border-radius: 2px; }
.sv-post-lines div:nth-child(2) { width: 70%; }
.sv-slides { display: flex; gap: 6px; width: 80%; }
.sv-sl { height: 36px; border-radius: var(--r-sm); flex: 1; }
.sv-sl--1 { background: var(--ciruela); opacity: 0.7; }
.sv-sl--2 { background: var(--coral); opacity: 0.6; }
.sv-sl--3 { background: var(--nude); opacity: 0.8; }

/* Invitaciones */
.sv-comp--invitaciones { background: var(--nude-claro); }
.sv-sobre { width: 75%; background: var(--blanco-hueso); border: 1px solid var(--gris-linea); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-md); }
.sv-sobre-flap { height: 28px; background: linear-gradient(180deg, var(--nude) 0%, var(--blanco-hueso) 100%); border-bottom: 1px solid var(--gris-linea); }
.sv-sobre-carta { padding: clamp(14px,2vw,20px); display: flex; flex-direction: column; gap: 8px; }
.sv-carta-line { height: 2px; background: rgba(94,44,87,0.12); border-radius: 1px; }
.sv-carta-line--tit { height: 3px; background: rgba(94,44,87,0.20); width: 70%; }
.sv-carta-line--sm { width: 55%; }
.sv-carta-deco { color: var(--coral); font-size: 1rem; text-align: center; opacity: 0.6; }

/* Papeleria */
.sv-comp--papeleria { background: var(--blanco-hueso); border: 1px solid var(--gris-linea); }
.sv-lib-stack { position: relative; width: 70%; height: 75%; }
.sv-lib { position: absolute; display: flex; left: 0; right: 0; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.sv-lib--3 { bottom: 0; transform: rotate(-4deg) translateX(-8px); height: 75%; z-index: 1; }
.sv-lib--2 { bottom: 0; transform: rotate(-2deg) translateX(-4px); height: 80%; z-index: 2; }
.sv-lib--1 { bottom: 0; transform: rotate(0deg); height: 85%; z-index: 3; }
.sv-lib-lomo { width: 12px; flex-shrink: 0; }
.sv-lib-cara { flex: 1; background: var(--nude-claro); padding: 10px 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.sv-lib-titulo { display: flex; gap: 4px; align-items: baseline; font-size: 0.65rem; }
.sv-lib-titulo span:first-child { font-family: var(--font-serif); color: var(--ciruela); }
.sv-lib-titulo span:last-child { font-family: var(--font-sans); color: var(--texto-claro); font-size: 0.55rem; }
.sv-lib-lines div { height: 1.5px; background: rgba(94,44,87,0.12); border-radius: 1px; margin-bottom: 3px; }
.sv-etiq-adh { position: absolute; top: var(--sp-4); right: var(--sp-4); background: var(--coral); color: var(--blanco-hueso); font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; z-index: 4; }

/* Packaging */
.sv-comp--packaging { background: linear-gradient(145deg, #EAD9D0 0%, #D9C5BB 100%); gap: 12px; }
.sv-pack-caja { width: 65%; box-shadow: var(--shadow-md); border-radius: var(--r-sm); overflow: hidden; }
.sv-pack-tapa { height: 36px; background: var(--ciruela); display: flex; align-items: center; justify-content: center; }
.sv-pack-marca { font-family: var(--font-serif); font-size: 1rem; color: var(--blanco-hueso); }
.sv-pack-cuerpo { background: var(--blanco-hueso); padding: 14px; }
.sv-pack-int { display: flex; gap: 8px; }
.sv-pack-i1 { flex: 1; height: 44px; background: var(--lavanda-clara); border-radius: var(--r-sm); }
.sv-pack-i2 { flex: 1; height: 44px; background: var(--nude-claro); border-radius: var(--r-sm); }
.sv-pack-tag { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sv-pack-tag-hole { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(94,44,87,0.3); }
.sv-pack-tag span { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-claro); background: var(--blanco-hueso); border: 1px solid var(--gris-linea); padding: 4px 10px; border-radius: var(--r-sm); }

/* Regalo */
.sv-comp--regalo { background: linear-gradient(155deg, var(--ciruela) 0%, var(--ciruela-osc) 100%); }
.sv-reg-caja { width: 65%; }
.sv-reg-tapa { height: 40px; background: rgba(247,243,238,0.10); border: 1px solid rgba(247,243,238,0.15); border-radius: var(--r-sm) var(--r-sm) 0 0; position: relative; }
.sv-reg-rib-h { position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; background: rgba(247,243,238,0.4); transform: translateY(-50%); }
.sv-reg-rib-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: rgba(247,243,238,0.4); transform: translateX(-50%); }
.sv-reg-mono { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.sv-reg-mono-l, .sv-reg-mono-r { width: 14px; height: 14px; border-radius: 50%; background: rgba(247,243,238,0.55); }
.sv-reg-cuerpo { background: rgba(247,243,238,0.08); border: 1px solid rgba(247,243,238,0.12); border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 14px 12px; }
.sv-reg-ins { display: flex; flex-direction: column; gap: 6px; }
.sv-reg-ins-l { height: 2px; background: rgba(247,243,238,0.25); border-radius: 1px; }
.sv-reg-ins-l--sm { width: 60%; }

/* Editorial */
.sv-comp--editorial { background: var(--blanco-hueso); border: 1px solid var(--gris-linea); }
.sv-doc-stack { position: relative; width: 70%; height: 80%; }
.sv-doc { position: absolute; border-radius: var(--r-sm); padding: clamp(10px,2vw,16px); left: 0; right: 0; box-shadow: var(--shadow-sm); }
.sv-doc--3 { bottom: 0; transform: rotate(-5deg) translateX(-10px); height: 70%; z-index: 1; }
.sv-doc--2 { bottom: 0; transform: rotate(-2.5deg) translateX(-5px); height: 78%; z-index: 2; }
.sv-doc--1 { bottom: 0; transform: rotate(0deg); height: 86%; z-index: 3; }
.sv-doc-tit { height: 3px; background: rgba(247,243,238,0.5); border-radius: 2px; width: 70%; }
.sv-doc-tit--cl { background: rgba(247,243,238,0.7); }
.sv-doc-lines { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.sv-doc-lines div { height: 2px; background: rgba(247,243,238,0.25); border-radius: 1px; }
.sv-doc-lines div:nth-child(2) { width: 75%; }
.sv-doc-lines div:nth-child(3) { width: 60%; }

/* Web */
.sv-comp--web { background: var(--blanco-hueso); border: 1px solid var(--gris-linea); gap: 12px; }
.sv-browser { width: 85%; background: var(--blanco-hueso); border: 1px solid var(--gris-linea); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.sv-browser-bar { background: rgba(94,44,87,0.04); padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--gris-linea); }
.sv-br-dots { display: flex; gap: 4px; }
.sv-br-dots span { width: 7px; height: 7px; border-radius: 50%; }
.sv-br-url { flex: 1; height: 8px; background: rgba(94,44,87,0.08); border-radius: 4px; }
.sv-browser-screen { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sv-web-h { height: 10px; background: rgba(94,44,87,0.18); border-radius: 5px; width: 65%; }
.sv-web-p { height: 6px; background: rgba(94,44,87,0.10); border-radius: 3px; width: 85%; }
.sv-web-btn-sim { height: 16px; width: 36%; background: var(--ciruela); opacity: 0.7; border-radius: 3px; margin-top: 4px; }
.sv-web-grid-s { display: flex; gap: 6px; margin-top: 6px; }
.sv-web-grid-s div { flex: 1; height: 28px; background: rgba(94,44,87,0.06); border-radius: var(--r-sm); }
.sv-resp-icons { display: flex; gap: 6px; align-items: flex-end; }
.sv-ri { background: rgba(94,44,87,0.12); border-radius: 2px; }
.sv-ri--d { width: 32px; height: 22px; }
.sv-ri--t { width: 20px; height: 18px; }
.sv-ri--m { width: 12px; height: 20px; }

/* Personalizacion */
.sv-comp--pers { background: var(--nude-claro); }
.sv-pers-items { display: flex; gap: 20px; align-items: flex-end; }
.sv-taza { position: relative; }
.sv-taza-body { width: 52px; height: 58px; background: var(--blanco-hueso); border: 1.5px solid var(--gris-linea); border-radius: 4px 4px 8px 8px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.sv-taza-logo { width: 22px; height: 22px; background: rgba(94,44,87,0.15); border-radius: 50%; }
.sv-taza-handle { position: absolute; right: -10px; top: 30%; width: 10px; height: 20px; border: 1.5px solid var(--gris-linea); border-left: none; border-radius: 0 8px 8px 0; background: transparent; }
.sv-topper { display: flex; flex-direction: column; align-items: center; }
.sv-topper-txt { background: var(--ciruela); color: var(--blanco-hueso); padding: 4px 10px; border-radius: var(--r-sm); }
.sv-topper-txt span { font-family: var(--font-serif); font-size: 0.9rem; }
.sv-topper-palo { width: 2px; height: 40px; background: rgba(94,44,87,0.3); }


/* =============================================================================
   12. PROCESO SERVICIOS
   ============================================================================= */
.proceso-s {
  padding: clamp(var(--sp-16),6vw,var(--sp-24)) 0;
  background: var(--blanco-hueso);
  border-top: 1px solid var(--gris-linea);
}
.proc-s-intro { text-align: center; margin-bottom: var(--sp-12); }
.proc-s-titulo { font-size: clamp(1.75rem,3vw,2.5rem); margin-top: var(--sp-4); }
.proc-s-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.proc-s-paso {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-top: 1px solid var(--gris-linea);
}
.paso-icon { margin-bottom: var(--sp-2); }
.paso-num { font-family: var(--font-serif); font-size: clamp(2rem,3vw,2.75rem); font-weight: 300; color: rgba(94,44,87,0.15); line-height: 1; }
.paso-titulo { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--carbon); margin-top: -4px; }
.paso-desc { font-size: var(--text-sm); color: var(--texto-claro); line-height: 1.65; }

/* =============================================================================
   13. CTA FINAL SERVICIOS
   ============================================================================= */
.cta-s-final {
  background: linear-gradient(155deg, var(--ciruela) 0%, var(--ciruela-osc) 100%);
  padding: clamp(var(--sp-16),7vw,var(--sp-24)) 0;
  position: relative;
  overflow: hidden;
}
.cta-s-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-12); position: relative; z-index: 2;
}
.cta-s-txt { flex: 1; max-width: 600px; display: flex; flex-direction: column; gap: var(--sp-5); }
.cta-s-tit { font-size: clamp(1.75rem,3.5vw,2.75rem); font-weight: 400; color: var(--blanco-hueso); line-height: 1.15; }
.cta-s-p { font-size: var(--text-base); color: rgba(247,243,238,0.7); max-width: 50ch; }
.cta-s-acciones { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }
.cta-s-deco { flex-shrink: 0; position: relative; width: 200px; height: 200px; }
.cta-arco { position: absolute; border-radius: 50%; border: 1px solid rgba(247,243,238,0.1); }
.cta-arco--1 { inset: 0; }
.cta-arco--2 { inset: 20px; border-color: rgba(247,243,238,0.07); }
.cta-arco--3 { inset: 40px; border-color: rgba(247,243,238,0.05); }

/* =============================================================================
   14. FOOTER
   ============================================================================= */
.site-footer { background: var(--carbon); color: var(--blanco-hueso); padding-top: clamp(var(--sp-16),6vw,var(--sp-20)); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(var(--sp-8),4vw,var(--sp-12));
  padding-bottom: clamp(var(--sp-16),5vw,var(--sp-20));
  border-bottom: 1px solid rgba(247,243,238,0.08);
}
.footer-col--brand { padding-right: var(--sp-8); }
.footer-logo { display: inline-block; margin-bottom: var(--sp-4); text-decoration: none; }
.footer-logo img { width: 150px; filter: brightness(0) invert(1); }
.footer-logo-text { display: flex; flex-direction: column; gap: 0; line-height: 1.1; }
.footer-logo-ive { font-family: var(--font-serif); font-size: 1.3rem; color: var(--blanco-hueso); font-style: italic; }
.footer-logo-studio { font-family: var(--font-sans); font-size: 1.1rem; color: var(--blanco-hueso); font-weight: 300; letter-spacing: 0.08em; }
.footer-logo-creativo { font-family: var(--font-sans); font-size: 0.7rem; color: rgba(247,243,238,0.5); letter-spacing: 0.15em; text-transform: uppercase; }
.footer-tagline { font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; color: var(--coral); margin-bottom: var(--sp-3); }
.footer-desc { font-size: var(--text-sm); color: rgba(247,243,238,0.55); line-height: 1.7; }
.footer-col-titulo { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(247,243,238,0.4); margin-bottom: var(--sp-5); }
.footer-nav-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-nav-lista a { font-size: var(--text-sm); color: rgba(247,243,238,0.65); transition: color var(--tr-fast); }
.footer-nav-lista a:hover, .footer-nav-lista a[aria-current] { color: var(--blanco-hueso); }
.footer-contacto-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-contacto-item { font-size: var(--text-sm); color: rgba(247,243,238,0.65); display: flex; align-items: center; gap: var(--sp-2); transition: color var(--tr-fast); }
.footer-contacto-item:hover { color: var(--blanco-hueso); }
.footer-bottom { padding: var(--sp-5) 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.footer-copy { font-size: var(--text-xs); color: rgba(247,243,238,0.35); letter-spacing: 0.04em; }
.footer-legal { display: flex; gap: var(--sp-6); }
.footer-legal a { font-size: var(--text-xs); color: rgba(247,243,238,0.35); transition: color var(--tr-fast); }
.footer-legal a:hover { color: rgba(247,243,238,0.7); }

/* =============================================================================
   15. ANIMACIONES REVEAL
   ============================================================================= */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* =============================================================================
   16. RESPONSIVE
   ============================================================================= */
@media (max-width: 1100px) {
  .categorias-grid { grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
}

@media (max-width: 900px) {
  .hero-s-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .hero-s-visual { display: none; }
  .sv-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .sv-inner--rev { direction: ltr; }
  .sv-visual { display: none; }
  .sv-detalles { grid-template-columns: 1fr; }
  .proc-s-pasos { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .btn-menu { display: flex; }
  .header-cta { display: none; }
  .categorias-grid { grid-template-columns: repeat(3, 1fr); }
  .proc-s-pasos { grid-template-columns: 1fr; }
  .cta-s-wrap { flex-direction: column; align-items: flex-start; }
  .cta-s-deco { display: none; }
}

@media (max-width: 480px) {
  .categorias-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .cat-item { padding: var(--sp-3) var(--sp-1); }
  .cat-icon { width: 44px; height: 44px; }
  .cat-label { font-size: 0.58rem; }
  .sv-lista--tags { gap: var(--sp-1); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-s-actions { flex-direction: column; }
  .hero-s-actions .btn { width: 100%; justify-content: center; }
}



/* ========================================= */
/* PROTOTIPO PORTAFOLIO EDITORIAL V1 */
/* ========================================= */
/* =============================================================================
   STYLES.CSS — Prototipo Visual Portafolio Editorial v1
   ============================================================================= */

/* 1. HERO PORTAFOLIO */
.portfolio-hero {
    padding-top: clamp(var(--sp-10), 6vw, var(--sp-16));
    padding-bottom: clamp(var(--sp-10), 6vw, var(--sp-16));
    overflow: hidden;
    background: #FFF9F7;
    border-bottom: 1px solid var(--gris-linea);
}

.portfolio-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    align-items: center;
}

@media (min-width: 992px) {
    .portfolio-hero__grid {
        grid-template-columns: 50% 50%;
        gap: var(--sp-16);
    }
}

.portfolio-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.portfolio-hero__h1 {
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: 1.1;
    color: var(--carbon);
}

.portfolio-hero__h1 em {
    font-style: italic;
    color: var(--ciruela);
}

.portfolio-hero__text {
    font-size: var(--text-md);
    color: var(--texto-claro);
    line-height: 1.7;
    max-width: 45ch;
}

.portfolio-hero__actions {
    display: flex;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
}

/* Composicion visual simulada */
.portfolio-hero__visual {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-hero__composition {
    position: relative;
    width: 100%;
    height: 100%;
}

.ph-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, #F2C2B1 0%, #E8A18F 100%);
    border-radius: 50%;
    opacity: 0.5;
}

.ph-item {
    position: absolute;
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    background-size: cover;
    background-position: center;
}

.ph-item-1 {
    width: 50%;
    height: 40%;
    top: 10%;
    left: 5%;
    transform: rotate(-5deg);
    background-color: var(--ciruela);
}

.ph-item-2 {
    width: 40%;
    height: 60%;
    bottom: 10%;
    right: 10%;
    transform: rotate(3deg);
    background-color: var(--nude);
}

.ph-item-3 {
    width: 30%;
    height: 35%;
    bottom: 5%;
    left: 20%;
    transform: rotate(-10deg);
    background-color: var(--blanco-hueso);
    border: 1px solid var(--gris-cemento);
}


/* 2. FILTROS HORIZONTALES */
.portfolio-filters {
    padding: var(--sp-6) 0;
    background: #fff;
    border-bottom: 1px solid var(--gris-linea);
    position: sticky;
    top: var(--header-h);
    z-index: 90;
}

.portfolio-filters__scroll {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    scrollbar-width: none; /* Firefox */
}

.portfolio-filters__scroll::-webkit-scrollbar {
    display: none; /* Chrome */
}

.filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    min-width: 90px;
    padding: var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: all var(--tr-fast);
    color: var(--texto-claro);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    background: none;
    cursor: pointer;
}

.filter-btn:hover {
    background: var(--blanco-hueso);
}

.filter-btn.active {
    background: var(--nude-claro);
    color: var(--coral-oscuro);
    border: 1px solid var(--coral);
}

.filter-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}


/* 3. GRID DE PROYECTOS */
.portfolio-grid-section {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-16);
    background: var(--blanco-hueso);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
}

@media (min-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tarjetas de Proyecto */
.p-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--tr-base), box-shadow var(--tr-base), opacity var(--tr-fast);
    opacity: 1;
    transform: scale(1);
}

.p-card.hidden {
    display: none; /* Controlado por JS */
}

.p-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.p-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.p-img-placeholder {
    width: 100%;
    height: 100%;
    transition: transform var(--tr-slow);
}

.p-card:hover .p-img-placeholder {
    transform: scale(1.05);
}

.p-card__number {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    background: var(--carbon);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--r-sm);
    z-index: 2;
}

.p-card__content {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.p-card__cat {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--coral);
}

.p-card__title {
    font-size: var(--text-lg);
    line-height: 1.3;
    margin-bottom: var(--sp-1);
}

.p-card__desc {
    font-size: var(--text-sm);
    margin-bottom: var(--sp-3);
}

/* 4. EXTRAS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-6);
}

.stat-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--coral);
}

.stat-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: 0.25rem;
}

.stat-desc {
    font-size: var(--text-xs);
    line-height: 1.5;
}

.process-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.p-step {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.p-step__num {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--coral);
    line-height: 1;
}

.p-step__title {
    font-size: var(--text-lg);
}

.p-step-arrow {
    color: var(--gris-cemento);
    font-size: 1.5rem;
}


/* ==========================================================================
   CONTACTO Y FORMULARIO EDITORIAL
   ========================================================================== */
.contact-hero {
  border-bottom: 1px solid rgba(199,176,200,0.2);
}

.editorial-form .form-row {
  display: flex;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.editorial-form .form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.editorial-form .form-group {
  margin-bottom: var(--sp-6);
}

.editorial-form label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--carbon);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}

.editorial-form input[type="text"],
.editorial-form input[type="email"],
.editorial-form textarea,
.editorial-form select {
  width: 100%;
  padding: var(--sp-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(199,176,200,0.4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ciruela);
  transition: border-color 0.3s;
  border-radius: 0;
}

.editorial-form select {
  cursor: pointer;
  appearance: none;
  padding-right: 30px;
}

.select-wrapper {
  position: relative;
}
.select-wrapper::after {
  content: "↓";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ciruela);
  pointer-events: none;
  font-family: var(--font-sans);
}

.editorial-form input:focus,
.editorial-form textarea:focus,
.editorial-form select:focus {
  outline: none;
  border-bottom-color: var(--ciruela);
}

.editorial-form textarea {
  resize: vertical;
  min-height: 100px;
}

.editorial-form input::placeholder,
.editorial-form textarea::placeholder {
  color: rgba(46,39,48,0.3);
  font-style: italic;
}

@media (max-width: 768px) {
  .editorial-form .form-row {
    flex-direction: column;
    gap: var(--sp-6);
  }
}