/* ---------------------------------------------------------------------------
   Sitio público de Mademar.

   Alineado con los mockups aprobados (DESARROLLO WEB/Mademar Web-selection*.png).
   Medidas tomadas de ahí, no inventadas:

     · Lienzo de diseño     1440 px
     · Contenedor           1320 px (60 px de margen a cada lado)
     · Logo en cabecera     46 px de alto   ← lo especifica la hoja de marca
     · WhatsApp flotante    ámbar, con etiqueta, 28 px de margen, abajo a la
                            derecha, en todas las páginas
     · Pie                  carbón, cuatro columnas
     · Barra de aviso       ámbar, sobre la cabecera

   Paleta exacta del PDF de marca — no aproximar:
     Ámbar     #FFD166   acento, CTAs
     Carbón    #333333   texto, pie
     Off-white #F5F5F5   fondo
     Blanco    #FFFFFF   superficies
   Tipografía: Montserrat.
--------------------------------------------------------------------------- */

:root {
    --ambar: #FFD166;
    --ambar-oscuro: #E8B948;
    --ambar-suave: #FFF7E6;
    --carbon: #333333;
    --carbon-claro: #5C5C5C;
    --tenue: #8C8C8C;
    --fondo: #F5F5F5;
    --superficie: #FFFFFF;
    --linea: #E6E4E0;
    --linea-fuerte: #D6D3CD;
    --madera: #8A6B4F;

    --maxancho: 1320px;
    --gutter: 2rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--carbon);
    background: var(--superficie);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0 0 .85rem; font-weight: 600; letter-spacing: -.022em; line-height: 1.12; }
h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 2.9vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

.envoltorio { max-width: var(--maxancho); margin: 0 auto; padding: 0 var(--gutter); }

.antetitulo {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--madera);
    font-weight: 600;
    margin: 0 0 .9rem;
}

/* --- Barra de aviso ------------------------------------------------------ */

.aviso-superior {
    background: var(--ambar);
    color: var(--carbon);
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    padding: .55rem var(--gutter);
}

/* --- Encabezado ---------------------------------------------------------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linea);
}
.cabecera .envoltorio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 84px;
}
.logotipo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logotipo img { height: 46px; width: auto; }

.menu { display: flex; gap: 2rem; align-items: center; font-size: .92rem; font-weight: 500; }
.menu a { padding: .4rem 0; border-bottom: 2px solid transparent; transition: border-color .15s; white-space: nowrap; }
.menu a:hover, .menu a.activo { border-bottom-color: var(--ambar); }

.acciones-cabecera { display: flex; gap: 1.1rem; align-items: center; flex: 0 0 auto; }
.acciones-cabecera a { display: flex; align-items: center; }
.acciones-cabecera svg { width: 20px; height: 20px; stroke: var(--carbon); fill: none; stroke-width: 1.7; }
.acciones-cabecera a:hover svg { stroke: var(--madera); }

/* --- Botones ------------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.7rem;
    border-radius: 3px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: var(--ambar);
    color: var(--carbon);
    border: 1px solid var(--ambar);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.boton:hover { background: var(--ambar-oscuro); border-color: var(--ambar-oscuro); }
.boton.secundario { background: transparent; border-color: var(--carbon); color: var(--carbon); }
.boton.secundario:hover { background: var(--carbon); color: #FFF; }
.boton.claro { background: #FFF; border-color: #FFF; color: var(--carbon); }
.boton.claro:hover { background: var(--fondo); border-color: var(--fondo); }
.boton.sobre-foto { background: transparent; border-color: #FFF; color: #FFF; }
.boton.sobre-foto:hover { background: #FFF; color: var(--carbon); }
.boton.bloque { width: 100%; }
.boton.pequeno { padding: .6rem 1.15rem; font-size: .72rem; }

.enlace-texto {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
    border-bottom: 2px solid var(--ambar); padding-bottom: .2rem; white-space: nowrap;
}

/* --- Portada a sangre ---------------------------------------------------- */

.portada {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    background: var(--carbon);
    overflow: hidden;
}
.portada .foto { position: absolute; inset: 0; }
.portada .foto img { width: 100%; height: 100%; object-fit: cover; }
.portada .velo {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(24, 22, 19, .84) 0%, rgba(24, 22, 19, .58) 44%, rgba(24, 22, 19, .12) 80%);
}
.portada .envoltorio { position: relative; padding-top: 5rem; padding-bottom: 5rem; width: 100%; }
.portada .texto { max-width: 36rem; color: #FFF; }
.portada .antetitulo { color: var(--ambar); }
.portada h1 { color: #FFF; }
.portada p.entrada { font-size: 1.05rem; color: rgba(255, 255, 255, .88); margin-bottom: 2rem; max-width: 32rem; }
.portada .acciones { display: flex; gap: .9rem; flex-wrap: wrap; }

/* --- Secciones ----------------------------------------------------------- */

.seccion { padding: 5.5rem 0; }
.seccion.compacta { padding: 4rem 0; }
.seccion.tenue-fondo { background: var(--fondo); }

.encabezado-seccion {
    margin-bottom: 3rem;
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 2rem; flex-wrap: wrap;
}
.encabezado-seccion .texto { max-width: 44rem; }
.encabezado-seccion p { color: var(--carbon-claro); margin: 0; }
.encabezado-seccion.centro { justify-content: center; text-align: center; }
.encabezado-seccion.centro .texto { margin: 0 auto; }

.rejilla { display: grid; gap: 1.75rem; }
.rejilla.dos    { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.rejilla.tres   { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.rejilla.cuatro { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* --- Tarjeta de línea ---------------------------------------------------- */

.linea-tarjeta {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 3; background: var(--carbon);
}
.linea-tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.linea-tarjeta:hover img { transform: scale(1.04); }
.linea-tarjeta .velo {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20, 18, 15, .74) 0%, rgba(20, 18, 15, .08) 60%, transparent 100%);
}
.linea-tarjeta .pie-tarjeta {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.4rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    color: #FFF;
}
.linea-tarjeta .pie-tarjeta strong { font-size: 1.3rem; font-weight: 600; }
.linea-tarjeta .flecha {
    width: 38px; height: 38px; flex: 0 0 auto;
    background: var(--ambar); color: var(--carbon);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; border-radius: 2px;
}

/* --- Tarjeta de colección ------------------------------------------------ */

.coleccion {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 3 / 4; background: var(--carbon);
}
.coleccion img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.coleccion:hover img { transform: scale(1.04); }
.coleccion .velo {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20, 18, 15, .9) 0%, rgba(20, 18, 15, .2) 58%, transparent 100%);
}
.coleccion .contenido { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem; color: #FFF; }
.coleccion .contenido .nivel {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .18em;
    color: var(--ambar); font-weight: 700; margin-bottom: .35rem;
}
.coleccion .contenido h3 { color: #FFF; margin-bottom: .35rem; font-size: 1.6rem; }
.coleccion .contenido p { font-size: .88rem; color: rgba(255, 255, 255, .84); margin: 0; }

/* --- Tarjeta de producto ------------------------------------------------- */

.producto {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--linea);
}
.producto .marco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo); }
.producto .marco img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.producto:hover .marco img { transform: scale(1.035); }
.producto .cuerpo { padding: 1.1rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.producto .coleccion-nombre {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .16em;
    color: var(--tenue); font-weight: 600; margin-bottom: .35rem;
}
.producto h3 { font-size: 1rem; margin: 0 0 .4rem; line-height: 1.35; }
.producto .estado { font-size: .78rem; color: var(--carbon-claro); margin: 0 0 1rem; }
.producto .boton { margin-top: auto; }

.distintivo-tarjeta {
    position: absolute; top: .75rem; left: .75rem; z-index: 2;
    padding: .3rem .6rem; border-radius: 2px;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    background: var(--ambar); color: var(--carbon);
}
.distintivo-tarjeta.carbon { background: var(--carbon); color: #FFF; }
.distintivo-tarjeta.gris   { background: var(--linea-fuerte); color: var(--carbon-claro); }

/* --- Franja de promoción ámbar ------------------------------------------- */

.franja-ambar { background: var(--ambar); padding: 2.4rem 0; }
.franja-ambar .envoltorio { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.franja-ambar .antetitulo { color: var(--carbon); opacity: .72; margin-bottom: .4rem; }
.franja-ambar h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.franja-ambar .boton { background: var(--carbon); border-color: var(--carbon); color: #FFF; }
.franja-ambar .boton:hover { background: #1F1F1F; border-color: #1F1F1F; }

/* --- Franja carbón ------------------------------------------------------- */

.franja { background: var(--carbon); color: #FFF; padding: 5rem 0; text-align: center; }
.franja h2 { color: #FFF; }
.franja p { color: rgba(255, 255, 255, .78); max-width: 36rem; margin: 0 auto 2rem; }
.franja .acciones { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* --- Beneficios ---------------------------------------------------------- */

.beneficio .icono {
    width: 46px; height: 46px; border-radius: 3px;
    background: var(--ambar-suave);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.beneficio .icono svg { width: 23px; height: 23px; stroke: var(--madera); fill: none; stroke-width: 1.6; }
.beneficio h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.beneficio p { font-size: .88rem; color: var(--carbon-claro); margin: 0; }

/* --- Filtros del catálogo ------------------------------------------------ */

.filtros-linea { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filtros-linea a {
    padding: .6rem 1.25rem; border: 1px solid var(--linea-fuerte); border-radius: 2px;
    font-size: .8rem; font-weight: 600; background: #FFF;
}
.filtros-linea a:hover { border-color: var(--carbon); }
.filtros-linea a.activo { background: var(--carbon); border-color: var(--carbon); color: #FFF; }

/* --- Ficha --------------------------------------------------------------- */

.ficha { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: start; }
.galeria .principal { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo); margin-bottom: .75rem; }
.galeria .principal img { width: 100%; height: 100%; object-fit: cover; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .55rem; }
.miniaturas button {
    padding: 0; border: 2px solid transparent; overflow: hidden;
    background: var(--fondo); cursor: pointer; aspect-ratio: 1; line-height: 0;
}
.miniaturas button.activa { border-color: var(--ambar); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.detalle .lista { list-style: none; padding: 0; margin: 0 0 2rem; }
.detalle .lista li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .8rem 0; border-bottom: 1px solid var(--linea); font-size: .92rem;
}
.detalle .lista li span:first-child { color: var(--tenue); }
.detalle .lista li span:last-child { font-weight: 500; text-align: right; }

.aviso-precio {
    background: var(--ambar-suave); border-left: 3px solid var(--ambar);
    padding: 1.15rem 1.3rem; font-size: .9rem; margin-bottom: 1.75rem;
}
.aviso-precio strong { display: block; margin-bottom: .25rem; }

/* --- Formulario ---------------------------------------------------------- */

.campo { margin-bottom: 1.1rem; }
.campo label {
    display: block; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--carbon-claro); margin-bottom: .45rem;
}
.campo input, .campo select, .campo textarea {
    width: 100%; padding: .8rem .9rem;
    border: 1px solid var(--linea-fuerte); border-radius: 2px;
    font: inherit; font-size: .92rem; color: var(--carbon); background: #FFF;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--ambar-oscuro);
    box-shadow: 0 0 0 3px rgba(255, 209, 102, .3);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo .error { color: #9B3025; font-size: .78rem; margin-top: .3rem; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.tarjeta-oscura { background: var(--carbon); color: #FFF; padding: 2rem; }
.tarjeta-oscura .antetitulo { color: var(--ambar); }
.tarjeta-oscura h3 { color: #FFF; font-size: 1.5rem; }
.tarjeta-oscura p { color: rgba(255, 255, 255, .8); font-size: .9rem; }
.tarjeta-oscura .horario { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 1.5rem; padding-top: 1.25rem; }
.tarjeta-oscura .horario div { display: flex; justify-content: space-between; font-size: .85rem; padding: .3rem 0; color: rgba(255, 255, 255, .8); }

.aviso-caja {
    background: var(--ambar-suave); border-left: 3px solid var(--ambar);
    padding: 1.15rem 1.3rem; font-size: .9rem; margin-bottom: 1.5rem;
}
.aviso-caja.error { background: #FBE9E7; border-color: #9B3025; }
.aviso-caja.exito { background: #E4F0EA; border-color: #2E6B4C; }

/* --- Pie ----------------------------------------------------------------- */

.pie { background: var(--carbon); color: rgba(255, 255, 255, .78); padding: 4rem 0 1.75rem; font-size: .88rem; }
.pie .columnas { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 2.5rem; margin-bottom: 3rem; }
.pie .logotipo img { height: 46px; }
.pie h4 {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
    color: #FFF; margin: 0 0 1rem; font-weight: 700;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .55rem; }
.pie a:hover { color: var(--ambar); }
.pie .legal {
    border-top: 1px solid rgba(255, 255, 255, .13);
    padding-top: 1.5rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .78rem; color: rgba(255, 255, 255, .5);
}

/* --- WhatsApp flotante ---------------------------------------------------- */
/* Especificado en la hoja de marca: ámbar, con etiqueta, 28 px de margen. */

.whatsapp {
    position: fixed; right: 28px; bottom: 28px; z-index: 60;
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--ambar); color: var(--carbon);
    padding: .8rem 1.25rem; border-radius: 999px;
    font-size: .85rem; font-weight: 700;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
    transition: background .15s, transform .15s;
}
.whatsapp:hover { background: var(--ambar-oscuro); transform: translateY(-2px); }
.whatsapp svg { width: 20px; height: 20px; fill: var(--carbon); }

/* --- Vacío --------------------------------------------------------------- */

.vacio { text-align: center; padding: 5rem 1.5rem; color: var(--tenue); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .pie .columnas { grid-template-columns: 1fr 1fr 1fr; }
    .menu { gap: 1.35rem; font-size: .86rem; }
}

@media (max-width: 900px) {
    .ficha { grid-template-columns: 1fr; gap: 2.5rem; }
    .portada { min-height: 520px; }
    .fila-campos { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    :root { --gutter: 1.25rem; }
    .seccion { padding: 3.5rem 0; }
    .cabecera .envoltorio { height: 68px; gap: 1rem; }
    .logotipo img { height: 34px; }
    .menu { gap: .9rem; font-size: .78rem; }
    .menu .ocultar-movil { display: none; }
    .acciones-cabecera { gap: .75rem; }
    .pie .columnas { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
    .pie .columnas > :first-child { grid-column: 1 / -1; }
    .whatsapp { right: 16px; bottom: 16px; padding: .7rem 1rem; font-size: .8rem; }
    .encabezado-seccion { margin-bottom: 2rem; }
}