/* ==================================================
   VIENTO DE MADERA — Estilo base
   Paleta: negro + madera natural + blanco roto
   Tipografía: Cormorant Garamond (display) + Inter (texto)
   Filosofía: sin iconos, espacios amplios, fotos grandes
   ================================================== */

/* ---------- Reset suave ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Tokens ---------- */
:root {
    --color-negro:        #0f0f0f;
    --color-negro-suave:  #1c1c1c;
    --color-grafito:      #2a2a2a;
    --color-blanco-roto:  #f5f1ea;
    --color-blanco:       #ffffff;
    --color-madera:       #b08456;
    --color-madera-osc:   #7a5634;
    --color-texto:        #1a1a1a;
    --color-texto-suave:  #5a5550;
    --color-borde:        #e0d9cd;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-text:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --max-width: 1240px;
    --gap: 2rem;
}

/* ---------- Base ---------- */
body {
    font-family: var(--font-text);
    font-weight: 300;
    color: var(--color-texto);
    background: var(--color-blanco-roto);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.005em;
    margin: 0 0 0.6em;
    color: var(--color-negro);
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1em; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-text);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-madera-osc);
    margin-bottom: 0.8rem;
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4rem;
}
.section-header-light .eyebrow { color: var(--color-madera); }
.section-header-light h2,
.section-header-light .section-lead { color: var(--color-blanco-roto); }

.section-lead {
    color: var(--color-texto-suave);
    font-size: 1.05rem;
}

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: 0.95rem 2.4rem;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary {
    background: var(--color-negro);
    color: var(--color-blanco-roto);
    border-color: var(--color-negro);
}
.btn-primary:hover {
    background: var(--color-madera-osc);
    border-color: var(--color-madera-osc);
}
.btn-ghost {
    background: transparent;
    color: var(--color-negro);
    border-color: var(--color-negro);
}
.btn-ghost:hover {
    background: var(--color-negro);
    color: var(--color-blanco-roto);
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245, 241, 234, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--color-borde);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.brand-tagline {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    margin-top: 0.15rem;
}
.main-nav {
    display: flex;
    gap: 2.2rem;
    align-items: center;
}
.main-nav a {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-texto);
    transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--color-madera-osc); }
.main-nav .nav-cta {
    border: 1px solid var(--color-negro);
    padding: 0.55rem 1.1rem;
}
.main-nav .nav-cta:hover {
    background: var(--color-negro);
    color: var(--color-blanco-roto);
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    color: var(--color-blanco-roto);
    background-color: #1a1614;
    background-image: url('../images/mesas/mesa-roble-1.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(15,15,15,0.72) 0%, rgba(15,15,15,0.45) 55%, rgba(15,15,15,0.78) 100%);
    pointer-events: none;
}
.hero-content {
    position: relative;
    max-width: 780px;
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.hero h1 { color: var(--color-blanco-roto); }
.hero-sub {
    font-size: 1.15rem;
    color: rgba(245, 241, 234, 0.78);
    max-width: 560px;
    margin-bottom: 2.5rem;
}

/* ---------- Intro ---------- */
.intro { padding: 6rem 0 5rem; }
.intro-inner {
    max-width: 780px;
    text-align: center;
}
.intro h2 { margin-bottom: 1.5rem; }
.intro p {
    font-size: 1.05rem;
    color: var(--color-texto-suave);
    margin-bottom: 1.2rem;
}

/* ---------- Colecciones ---------- */
.colecciones { padding: 5rem 0 7rem; }
.coleccion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}
.coleccion-card {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.coleccion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -25px rgba(0,0,0,0.35);
}
.card-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-negro-suave);
}
.card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.coleccion-card:hover .card-image img { transform: scale(1.04); }
.card-image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(245,241,234,0.4);
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 100%);
}
.card-body { padding: 2rem 1.8rem 2.2rem; }
.card-body h3 { margin-bottom: 0.6rem; }
.card-body p {
    color: var(--color-texto-suave);
    font-size: 0.95rem;
    margin-bottom: 1.4rem;
}
.card-link {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-negro);
    border-bottom: 1px solid var(--color-negro);
    padding-bottom: 0.2rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.card-link:hover {
    color: var(--color-madera-osc);
    border-color: var(--color-madera-osc);
}

/* ---------- Proceso ---------- */
.proceso {
    background: var(--color-negro);
    color: var(--color-blanco-roto);
    padding: 6.5rem 0;
}
.proceso-pasos {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem 2.5rem;
}
.proceso-pasos li { padding-top: 1rem; border-top: 1px solid rgba(245,241,234,0.18); }
.paso-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-madera);
    margin-bottom: 1rem;
}
.proceso-pasos h3 {
    color: var(--color-blanco-roto);
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}
.proceso-pasos p {
    color: rgba(245,241,234,0.7);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Nosotros ---------- */
.nosotros { padding: 7rem 0; }
.nosotros-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.nosotros-text p {
    color: var(--color-texto-suave);
    font-size: 1.02rem;
}
.nosotros-image .image-placeholder {
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(245,241,234,0.35);
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}

/* ---------- Contacto ---------- */
.contacto {
    padding: 6.5rem 0 8rem;
    background: var(--color-blanco);
    border-top: 1px solid var(--color-borde);
}
.contact-form {
    max-width: 760px;
    margin: 0 auto;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.contact-form label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    margin-bottom: 1.5rem;
}
.contact-form label.full { display: block; }
.contact-form label em {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-texto-suave);
    font-size: 0.85em;
    opacity: 0.7;
}
.contact-form span {
    display: block;
    margin-bottom: 0.5rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--color-texto);
    background: var(--color-blanco-roto);
    border: 1px solid var(--color-borde);
    border-radius: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
    text-transform: none;
    letter-spacing: 0;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-negro);
    background: var(--color-blanco);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.form-note {
    margin-top: 1.8rem;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    text-align: center;
}
.form-note a {
    color: var(--color-negro);
    border-bottom: 1px solid var(--color-borde);
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-negro);
    color: rgba(245,241,234,0.65);
    padding: 3.5rem 0 2.5rem;
}
.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 2.5rem;
    align-items: start;
}
.footer-brand .brand-name {
    color: var(--color-blanco-roto);
    font-size: 1.3rem;
}
.footer-brand p {
    margin-top: 0.5rem;
    font-size: 0.88rem;
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.footer-links a {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245,241,234,0.75);
    transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--color-madera); }
.footer-meta {
    text-align: right;
    font-size: 0.78rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .nosotros-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-links { align-items: center; }
    .footer-meta { text-align: center; }
}
@media (max-width: 640px) {
    .header-inner { flex-wrap: wrap; gap: 1rem; }
    .main-nav { gap: 1.2rem; flex-wrap: wrap; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-row label { margin-bottom: 1.5rem; }
    .hero-content { padding-top: 4rem; padding-bottom: 4rem; }
    .hero { min-height: 70vh; }
    .intro, .colecciones, .nosotros, .contacto { padding: 4rem 0; }
    .proceso { padding: 4.5rem 0; }
}

/* ==================================================
   PÁGINAS DE COLECCIÓN (mesas-comedor, estanterías, mesitas)
   ================================================== */

.page-hero {
    background: var(--color-negro);
    color: var(--color-blanco-roto);
    padding: 6rem 0 5rem;
    text-align: center;
}
.page-hero .eyebrow { color: var(--color-madera); }
.page-hero h1 {
    color: var(--color-blanco-roto);
    margin-bottom: 1.2rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
}
.page-hero p {
    color: rgba(245,241,234,0.75);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.05rem;
}

.breadcrumb {
    padding: 1.2rem 0;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    border-bottom: 1px solid var(--color-borde);
}
.breadcrumb a { color: var(--color-texto-suave); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--color-negro); }
.breadcrumb .sep { margin: 0 0.6rem; opacity: 0.5; }
.breadcrumb .current { color: var(--color-negro); }

.modelos {
    padding: 5rem 0 7rem;
}
.modelo {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 0;
    border-bottom: 1px solid var(--color-borde);
}
.modelo:last-child { border-bottom: none; }
.modelo:nth-child(even) {
    grid-template-columns: 1fr 1.2fr;
}
.modelo:nth-child(even) .modelo-img { order: 2; }
.modelo:nth-child(even) .modelo-info { order: 1; }

.modelo-img {
    aspect-ratio: 4 / 3;
    background: var(--color-negro-suave);
    overflow: hidden;
}
.modelo-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.modelo-img .image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(245,241,234,0.35);
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 100%);
}

.modelo-info .eyebrow { color: var(--color-madera-osc); }
.modelo-info h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
}
.modelo-info p {
    color: var(--color-texto-suave);
    font-size: 1rem;
    margin-bottom: 1.4rem;
}
.modelo-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    border-top: 1px solid var(--color-borde);
}
.modelo-specs li {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.92rem;
}
.modelo-specs .spec-label {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    align-self: center;
}
.modelo-specs .spec-value {
    color: var(--color-texto);
}
.modelo-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    .modelo,
    .modelo:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .modelo:nth-child(even) .modelo-img { order: 0; }
    .modelo:nth-child(even) .modelo-info { order: 0; }
}

/* ==================================================
   COTIZADOR 3D (preview escena)
   ================================================== */

.cotizador-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    min-height: calc(100vh - 70px);
}
.cotizador-3d-canvas {
    background: var(--color-blanco-roto);
    position: relative;
    min-height: 60vh;
}
.cotizador-3d-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.cotizador-panel {
    background: var(--color-blanco);
    border-left: 1px solid var(--color-borde);
    padding: 2.5rem 2rem;
    overflow-y: auto;
}
.cotizador-panel h2 {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}
.cotizador-panel .modelo-actual {
    color: var(--color-texto-suave);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
.cotizador-grupo {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-borde);
}
.cotizador-grupo:last-of-type { border-bottom: none; }
.cotizador-grupo h3 {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    margin-bottom: 1rem;
    font-family: var(--font-text);
    font-weight: 500;
}
.cotizador-medida {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.8rem;
}
.cotizador-medida label {
    font-size: 0.85rem;
    color: var(--color-texto);
}
.cotizador-medida input[type="number"] {
    width: 90px;
    padding: 0.5rem 0.6rem;
    font: inherit;
    text-align: right;
    border: 1px solid var(--color-borde);
    background: var(--color-blanco-roto);
}
.cotizador-medida input[type="number"]:focus {
    outline: none;
    border-color: var(--color-negro);
    background: var(--color-blanco);
}

@media (max-width: 900px) {
    .cotizador-layout { grid-template-columns: 1fr; }
    .cotizador-panel { border-left: none; border-top: 1px solid var(--color-borde); }
}