/* ============================================================================
   ESTILOS DE DECOIDEAS
   Este archivo controla el diseño de TODAS las páginas del sitio (colores,
   tipografía, espaciados, tarjetas, botones, menú, etc). Todas las páginas
   HTML cargan este mismo archivo, así que un cambio aquí se ve reflejado en
   todo el sitio a la vez.

   Si algún día quieres cambiar los 3 colores de la marca, solo edita las
   tres líneas de --mostaza, --crema y --carbon un poco más abajo.
   ============================================================================ */

:root{
  --mostaza: #C8862A;
  --crema:   #F3ECDF;
  --carbon:  #1F2326;

  /* Tonos derivados de los 3 colores de marca (para tarjetas, bordes, sombras) */
  --superficie: color-mix(in srgb, var(--crema) 92%, var(--carbon) 8%);
  --borde:      color-mix(in srgb, var(--carbon) 14%, transparent);
  --borde-osc:  color-mix(in srgb, var(--crema) 18%, transparent);
  --texto-suave:      color-mix(in srgb, var(--carbon) 70%, transparent);
  --texto-suave-osc:  color-mix(in srgb, var(--crema) 75%, transparent);

  --fuente-titulo: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --fuente-texto:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fuente-datos:  'Space Mono', 'SFMono-Regular', Menlo, monospace;

  --ancho-maximo: 1240px;
  --ancho-texto: 780px;
  --margen: clamp(1.25rem, 4vw, 3.5rem);
  --alto-header: 5.4rem;
}

/* ==========================================================================
   BASE — reglas generales que aplican a toda la página
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--crema); color:var(--carbon);
  font-family:var(--fuente-texto); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--fuente-titulo); font-weight:900; line-height:1.08; letter-spacing:-.01em; margin:0; color:var(--carbon); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

/* Foco de teclado siempre visible (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--mostaza); outline-offset:2px;
}

/* Enlace "saltar al contenido" — solo aparece si alguien navega con el teclado */
.saltar-enlace{
  position:absolute; left:1rem; top:-4rem; background:var(--carbon); color:var(--crema);
  padding:.8em 1.2em; border-radius:8px; z-index:200; transition:top .2s;
}
.saltar-enlace:focus{ top:1rem; }

.container{ max-width:var(--ancho-maximo); margin-inline:auto; padding-inline:var(--margen); }
.contenido-texto{ max-width:var(--ancho-texto); }
.muted{ color:var(--texto-suave); }
.muted-osc{ color:var(--texto-suave-osc); }

.eyebrow{
  font-family:var(--fuente-datos); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--carbon); font-weight:700; display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:1.3em; height:2px; background:var(--mostaza); display:inline-block; }
.eyebrow.claro{ color:var(--crema); }

.seccion{ padding:6.5rem 0; }
.seccion-cabecera{ max-width:40rem; margin-bottom:3.6rem; }
.seccion-cabecera h1, .seccion-cabecera h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:.6rem; }
.seccion-cabecera p{ margin-top:1rem; font-size:1.05rem; max-width:38ch; }
.seccion-cabecera.centrada{ margin-inline:auto; text-align:center; }
.seccion-cabecera.centrada .eyebrow::before{ display:none; }
.bg-superficie{ background:var(--superficie); }
.bg-carbon{ background:var(--carbon); color:var(--crema); }
.bg-carbon h2{ color:var(--crema); }

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; gap:.6em; font-weight:700; font-size:.98rem;
  padding:.95em 1.7em; border-radius:999px; white-space:nowrap;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .25s, color .25s;
}
.boton-mostaza{
  background:var(--mostaza); color:var(--carbon);
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--mostaza) 55%, transparent);
}
.boton-mostaza:hover{
  background:color-mix(in srgb, var(--mostaza) 80%, var(--carbon) 20%);
  transform:translateY(-2px);
}
.boton-borde{ color:var(--carbon); border:1.5px solid var(--borde); background:transparent; }
.boton-borde:hover{ border-color:var(--carbon); }
.boton-borde.claro{ color:var(--crema); border-color:var(--borde-osc); }
.boton-borde.claro:hover{ border-color:var(--crema); }
.icono-wa{ width:1.15em; height:1.15em; flex:none; }

/* ==========================================================================
   ENCABEZADO FIJO (igual en todas las páginas)
   ========================================================================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:1rem 0; transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
  --color-texto-header: var(--crema);
}
.header.header--con-fondo{
  background:color-mix(in srgb, var(--crema) 94%, transparent); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--borde); padding:.7rem 0; --color-texto-header: var(--carbon);
}
/* En páginas sin foto grande de fondo (producto, nosotros, etc.) el encabezado
   parte siempre con fondo claro, para que el texto del menú se lea bien. */
.header.header--fijo-claro{ --color-texto-header: var(--carbon); background:color-mix(in srgb, var(--crema) 94%, transparent); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--borde); padding:.7rem 0; }

.header-fila{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.logo{ display:flex; align-items:center; gap:.325rem; }
/* El logo siempre va sobre una placa crema propia: la marca original se
   diseñó para verse sobre fondo crema, así que le damos ese fondo fijo
   nosotros mismos en vez de depender de qué haya detrás (foto oscura del
   hero, menú ya con fondo claro, pie de página oscuro, etc). */
.brand-mark-plate{ background:var(--crema); border-radius:9px; padding:1px; display:flex; flex:none; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.logo svg, .logo img{ width:39px; height:39px; flex:none; object-fit:contain; }
.logo-texto{ display:flex; flex-direction:column; line-height:1.15; }
.logo-texto b{ font-family:var(--fuente-texto); font-size:1.05rem; font-weight:800; letter-spacing:-.01em; text-transform:uppercase; color:var(--color-texto-header); transition:color .35s; }
.logo-texto > span{ font-family:var(--fuente-datos); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-texto-header); opacity:.75; transition:color .35s; }
.marca-ideas{ opacity:.5; }

.nav-principal{ display:flex; align-items:center; gap:1.7rem; }
.nav-principal a{ font-weight:600; font-size:.9rem; color:var(--color-texto-header); position:relative; padding:.3em 0; transition:color .35s; }
.nav-principal a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--mostaza); transition:right .3s cubic-bezier(.22,1,.36,1); }
.nav-principal a:hover::after, .nav-principal a[aria-current="page"]::after{ right:0; }

/* Menú desplegable de "Productos" en el menú de escritorio */
.nav-item-desplegable{ position:relative; }
.nav-item-desplegable > button{ display:flex; align-items:center; gap:.35em; padding:.3em 0; font-weight:600; font-size:.9rem; color:var(--color-texto-header); transition:color .35s; }
.nav-item-desplegable > button svg{ width:11px; height:11px; transition:transform .25s; }
.nav-item-desplegable.abierto > button svg{ transform:rotate(180deg); }
.nav-desplegable-panel{
  position:absolute; top:calc(100% + .9rem); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--crema); border:1px solid var(--borde); border-radius:14px; padding:.6rem;
  min-width:230px; box-shadow:0 24px 44px -20px color-mix(in srgb, var(--carbon) 45%, transparent);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
  display:flex; flex-direction:column; gap:.15rem; z-index:5;
}
.nav-item-desplegable.abierto .nav-desplegable-panel{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-desplegable-panel a{ color:var(--carbon); font-size:.87rem; font-weight:500; padding:.6em .8em; border-radius:8px; }
.nav-desplegable-panel a:hover{ background:var(--superficie); }
.nav-desplegable-panel a::after{ display:none; }

/* En el menú de celular, "Productos" se muestra como una lista simple debajo del título */
.menu-movil-subtitulo{ font-family:var(--fuente-datos); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mostaza); margin-top:.4rem; }
.menu-movil-sublista{ display:flex; flex-direction:column; gap:.6rem; }
.menu-movil-sublista a{ font-family:var(--fuente-texto); font-size:1.05rem; font-weight:600; color:var(--crema); }
.menu-movil-sublista a:hover{ color:var(--mostaza); }

.header-acciones{ display:flex; align-items:center; gap:1rem; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; padding:.5rem; }
.menu-toggle span{ width:24px; height:2px; background:var(--color-texto-header); display:block; transition:background .35s; }

.menu-movil{
  position:fixed; inset:0; background:var(--carbon); z-index:90;
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:2rem var(--margen); transform:translateY(-100%); transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.menu-movil.abierto{ transform:translateY(0); }
.menu-movil nav{ display:flex; flex-direction:column; gap:1rem; max-height:70vh; overflow-y:auto; }
.menu-movil a{ font-family:var(--fuente-titulo); font-size:1.7rem; font-weight:600; color:var(--crema); }
.menu-movil a:hover{ color:var(--mostaza); }
.menu-movil-cerrar{ position:absolute; top:1.4rem; right:var(--margen); color:var(--crema); font-size:1.6rem; }

/* ==========================================================================
   MIGAS DE PAN (breadcrumbs) — ayudan a Google y a la persona a ubicarse
   ========================================================================== */
.migas{ padding:calc(var(--alto-header) + 1.6rem) 0 0; }
.migas ol{ display:flex; flex-wrap:wrap; gap:.5rem; font-size:.82rem; color:var(--texto-suave); }
.migas li::after{ content:"/"; margin-left:.5rem; color:var(--texto-suave); }
.migas li:last-child::after{ content:""; }
.migas a:hover{ color:var(--carbon); text-decoration:underline; }
.migas li[aria-current="page"]{ color:var(--carbon); font-weight:600; }

/* ==========================================================================
   VENTANA (MODAL) DE DESCUENTO
   ========================================================================== */
.modal-fondo{
  position:fixed; inset:0; background:color-mix(in srgb, var(--carbon) 68%, transparent);
  z-index:120; display:flex; align-items:center; justify-content:center; padding:1.2rem;
  opacity:0; visibility:hidden; transition:opacity .35s ease;
}
.modal-fondo.abierto{ opacity:1; visibility:visible; }
.modal-caja{
  background:var(--crema); border-radius:20px; max-width:440px; width:100%;
  max-height:88vh; overflow-y:auto; padding:2.4rem; position:relative; text-align:center;
  transform:translateY(16px) scale(.97); transition:transform .35s cubic-bezier(.22,1,.36,1);
  border:1px solid var(--borde);
}
.modal-fondo.abierto .modal-caja{ transform:none; }
.modal-cerrar-x{
  position:absolute; top:.9rem; right:.9rem; width:34px; height:34px; border-radius:50%;
  background:var(--superficie); display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.modal-marca{ width:44px; height:44px; margin:0 auto 1rem; }
.modal-caja h2{ font-size:1.5rem; margin-bottom:.8rem; }
.modal-caja p{ font-size:.98rem; margin-bottom:1.6rem; }
.modal-botones{ display:flex; flex-direction:column; gap:.9rem; align-items:center; }

/* ==========================================================================
   PORTADA (HERO) — para Inicio
   ========================================================================== */
.hero{ position:relative; min-height:min(92vh,820px); overflow:hidden; display:flex; align-items:center; }
.hero-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-velo{
  position:absolute; inset:0;
  background:linear-gradient(100deg, color-mix(in srgb, var(--carbon) 88%, transparent) 0%, color-mix(in srgb, var(--carbon) 55%, transparent) 55%, color-mix(in srgb, var(--carbon) 25%, transparent) 100%);
}
.hero-contenido{ position:relative; z-index:2; padding-top:var(--alto-header); width:100%; }
.hero-texto{ max-width:36rem; }
.hero-eyebrow{ margin-bottom:1.2rem; }

.titular-envoltorio{ position:relative; display:inline-block; }
.hero h1{ font-size:clamp(2.3rem,5.4vw,4rem); color:var(--crema); position:relative; z-index:1; }
/* Persiana que se abre sobre el titular: un riel fijo arriba y un solo
   paño de tela que sube en un solo movimiento, como una cortina roller real
   (antes eran 5 rectángulos independientes moviéndose cada uno para su lado,
   que se veía desordenado). La tela es translúcida y desenfoca levemente lo
   que hay detrás, como una tela sunscreen real: se alcanza a adivinar el
   titular mientras la persiana todavía está bajada. */
.lamas-riel{ position:absolute; top:-3%; left:-2%; right:-2%; height:7px; background:var(--carbon); z-index:4; border-radius:3px; }
.lamas-tela{
  position:absolute; inset:-3% -2% auto -2%; height:106%; z-index:3;
  background:color-mix(in srgb, var(--crema) 34%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transform-origin:top; pointer-events:none;
  animation:abrirPersiana 1.1s .35s cubic-bezier(.7,0,.16,1) forwards;
}
@keyframes abrirPersiana{ to{ transform:scaleY(0); } }
@media (prefers-reduced-motion:reduce){ .lamas-riel,.lamas-tela{ display:none; } }

.hero-sub{ margin-top:1.5rem; font-size:1.12rem; max-width:42ch; color:color-mix(in srgb, var(--crema) 88%, transparent); }
.hero-botones{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:1.4rem; }

.hero-cifras{
  margin-top:3.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
  border-top:1px solid var(--borde-osc); padding-top:2rem; max-width:52rem;
}
.cifra b{ display:block; font-family:var(--fuente-titulo); font-size:clamp(1.73rem,3.74vw,2.88rem); color:var(--crema); white-space:nowrap; }
.cifra span{ display:block; font-size:1.13rem; color:color-mix(in srgb, var(--crema) 70%, transparent); margin-top:.3rem; line-height:1.4; }

/* Cifras reutilizadas fuera del hero (por ejemplo en Nosotros), sobre fondo claro */
.cifras-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.cifras-grid .cifra b{ color:var(--carbon); }
.cifras-grid .cifra span{ color:var(--texto-suave); }

/* ---------- Aparición suave al hacer scroll ---------- */
.aparece{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--n,0) * 80ms);
}
.aparece.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .aparece{ opacity:1; transform:none; transition:none; } }

/* ---------- Encabezado simple para páginas sin foto de fondo grande ---------- */
.pagina-encabezado{ padding:calc(var(--alto-header) + 3rem) 0 1rem; }
.pagina-encabezado h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); margin-top:.7rem; }
.pagina-encabezado p{ margin-top:1.1rem; font-size:1.08rem; max-width:44ch; }

/* ==========================================================================
   FRANJA DE CLIENTES INSTITUCIONALES
   ========================================================================== */
.franja-clientes{ padding:3.2rem 0; border-top:1px solid var(--borde); border-bottom:1px solid var(--borde); }
.franja-titulo{ text-align:center; font-family:var(--fuente-datos); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:1.6rem; }
.franja-lista{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; row-gap:1rem; }
.franja-lista li{ font-weight:700; font-size:.95rem; padding:0 1.6rem; border-right:1px solid var(--borde); color:var(--carbon); }
.franja-lista li:last-child{ border-right:none; }

/* ==========================================================================
   PRODUCTOS — tarjetas usadas en Inicio (destacados + "también te podría interesar")
   ========================================================================== */
.productos-destacados{ display:flex; flex-direction:column; gap:2rem; margin-bottom:3.4rem; }
.tarjeta-producto{
  background:var(--superficie); border:1px solid var(--borde); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  position:relative;
}
.tarjeta-producto:hover{ transform:translateY(-6px); box-shadow:0 18px 32px -22px color-mix(in srgb, var(--carbon) 35%, transparent); }
.tarjeta-producto .foto-producto{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.tarjeta-producto.destacada{ flex-direction:row; align-items:stretch; }
.tarjeta-producto.destacada .foto-producto{ width:46%; height:auto; aspect-ratio:auto; flex:none; object-fit:cover; }
.etiqueta-pedida{
  position:absolute; top:1rem; left:1rem; z-index:2; background:var(--mostaza); color:var(--carbon);
  font-family:var(--fuente-datos); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:.5em 1em; border-radius:999px;
}
.producto-info{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.producto-info h3{ font-family:var(--fuente-texto); font-size:1.1rem; font-weight:700; }
.tarjeta-producto.destacada .producto-info{ justify-content:center; padding:clamp(1.6rem,3vw,2.6rem); gap:.9rem; }
.tarjeta-producto.destacada .producto-info h3{ font-family:var(--fuente-titulo); font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:700; }
.tarjeta-producto.destacada .producto-info p{ font-size:1rem; line-height:1.75; }
.producto-info p{ font-size:.92rem; flex:1; }
.producto-enlace{ margin-top:.4rem; font-weight:700; font-size:.85rem; display:inline-flex; gap:.4em; align-self:flex-start; border-bottom:1px solid var(--borde); padding-bottom:.15em; transition:gap .3s, border-color .3s; }
.producto-enlace:hover{ gap:.7em; border-color:var(--carbon); }

/* "También te podría interesar": carrusel horizontal con el resto de los productos */
.relacionados-cabecera{ margin-bottom:1.6rem; }
.relacionados-carrusel{
  display:flex; gap:1.3rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.3rem .2rem 1.2rem; scrollbar-width:none; cursor:grab;
}
.relacionados-carrusel::-webkit-scrollbar{ display:none; }
.relacionados-carrusel.arrastrando{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.tarjeta-relacionada{
  scroll-snap-align:start; flex:0 0 min(230px,68vw);
  background:var(--superficie); border:1px solid var(--borde); border-radius:14px; overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.tarjeta-relacionada:hover{ transform:translateY(-5px); box-shadow:0 14px 24px -18px color-mix(in srgb, var(--carbon) 30%, transparent); }
.tarjeta-relacionada img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.relacionada-info{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.relacionada-info h3{ font-family:var(--fuente-texto); font-size:.95rem; font-weight:700; }
.relacionada-info a{ font-size:.8rem; font-weight:700; color:var(--carbon); border-bottom:1px solid var(--borde); align-self:flex-start; padding-bottom:.1em; }
.relacionada-info a:hover{ border-color:var(--carbon); }

/* ---------- Galería (showroom virtual) ---------- */
.galeria-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.galeria-item{ border-radius:14px; overflow:hidden; background:var(--crema); }
.galeria-item img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.galeria-item:hover img{ transform:scale(1.07); }
.galeria-cta{ margin-top:2.4rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.2rem; text-align:center; }

/* ==========================================================================
   FICHA DE PRODUCTO (páginas individuales /productos/...)
   ========================================================================== */
.ficha-producto{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.ficha-foto{ border-radius:20px; overflow:hidden; border:1px solid var(--borde); position:sticky; top:calc(var(--alto-header) + 1.5rem); }
.ficha-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ficha-info h1{ font-size:clamp(2rem,4vw,2.8rem); }
.ficha-info .eyebrow{ margin-bottom:.9rem; }
.ficha-resumen{ margin-top:1.3rem; font-size:1.08rem; color:var(--texto-suave); }
.ficha-acciones{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:1.2rem; }
.ficha-datos{ margin-top:2.2rem; display:flex; flex-direction:column; gap:.8rem; }
.ficha-dato{ display:flex; gap:.7rem; font-size:.92rem; }
.ficha-dato svg{ width:18px; height:18px; color:var(--mostaza); flex:none; margin-top:.15em; }

.contenido-producto{ margin-top:5rem; max-width:var(--ancho-texto); }
.contenido-producto h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-top:2.6rem; margin-bottom:1rem; }
.contenido-producto h2:first-child{ margin-top:0; }
.contenido-producto h3{ font-family:var(--fuente-texto); font-size:1.15rem; margin-top:1.6rem; margin-bottom:.6rem; }
.contenido-producto p{ margin-bottom:1.1rem; font-size:1rem; color:var(--texto-suave); }
.contenido-producto ul{ margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.5rem; }
.contenido-producto ul li{ padding-left:1.4rem; position:relative; font-size:1rem; color:var(--texto-suave); }
.contenido-producto ul li::before{ content:"—"; position:absolute; left:0; color:var(--mostaza); }

/* ---------- FAQ (usado en cada producto y en Contacto) ---------- */
.faq-lista{ max-width:var(--ancho-texto); margin-top:1.6rem; display:flex; flex-direction:column; gap:1rem; }
.faq-item{ border:1px solid var(--borde); border-radius:14px; background:var(--superficie); overflow:hidden; }
.faq-pregunta{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem 1.4rem; text-align:left; font-weight:700; font-size:.98rem;
}
.faq-pregunta .mas{ position:relative; width:18px; height:18px; flex:none; }
.faq-pregunta .mas::before, .faq-pregunta .mas::after{ content:""; position:absolute; background:var(--mostaza); transition:transform .3s; }
.faq-pregunta .mas::before{ top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.faq-pregunta .mas::after{ left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); }
.faq-item.abierto .faq-pregunta .mas::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-respuesta{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-respuesta p{ padding:0 1.4rem 1.3rem; font-size:.94rem; color:var(--texto-suave); }

/* ==========================================================================
   VENTAJAS
   ========================================================================== */
.ventajas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.tarjeta-ventaja{
  background:var(--superficie); border:1px solid var(--borde); border-radius:16px; padding:2rem 1.8rem;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.tarjeta-ventaja:hover{ transform:translateY(-5px); box-shadow:0 16px 28px -22px color-mix(in srgb, var(--carbon) 30%, transparent); }
.icono-ventaja{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--mostaza) 15%, var(--crema)); color:var(--mostaza); margin-bottom:1.2rem;
}
.icono-ventaja svg{ width:23px; height:23px; }
.tarjeta-ventaja h3{ font-family:var(--fuente-texto); font-size:1.12rem; font-weight:700; margin-bottom:.5rem; }
.tarjeta-ventaja p{ font-size:.93rem; }

/* ==========================================================================
   CÓMO TRABAJAMOS (4 PASOS)
   ========================================================================== */
.pasos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem; position:relative; }
.pasos-grid::before{ content:""; position:absolute; top:23px; left:12%; right:12%; height:1px; background:repeating-linear-gradient(90deg, var(--borde) 0 8px, transparent 8px 16px); }
.paso-num{
  width:48px; height:48px; border-radius:50%; background:var(--crema); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center; font-family:var(--fuente-titulo); font-weight:700;
  color:var(--carbon); position:relative; margin-bottom:1.2rem;
}
.paso h3{ font-family:var(--fuente-texto); font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.paso p{ font-size:.92rem; }

/* ==========================================================================
   COTIZADOR
   ========================================================================== */
.cotizador-caja{ background:var(--superficie); border:1px solid var(--borde); border-radius:22px; padding:clamp(1.6rem,4vw,3rem); }
.campo{ display:flex; flex-direction:column; gap:.5rem; font-size:.88rem; font-weight:700; }
.campo input, .campo select, .campo textarea{
  font-weight:400; padding:.8em 1em; border-radius:10px; border:1px solid var(--borde);
  background:var(--crema); color:var(--carbon); width:100%;
}
.datos-cliente{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:2rem; }
.ventana-bloque{ border:1px solid var(--borde); border-radius:14px; padding:1.5rem; margin-bottom:1.4rem; background:var(--crema); }
.ventana-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.ventana-titulo{ font-family:var(--fuente-texto); font-size:1rem; font-weight:800; }
.btn-quitar{ font-size:.82rem; font-weight:700; color:var(--carbon); border:1px solid var(--borde); border-radius:999px; padding:.4em 1em; }
.btn-quitar:hover{ border-color:var(--carbon); }
.ventana-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.btn-agregar-ventana{ font-weight:700; font-size:.92rem; color:var(--carbon); border:1.5px dashed var(--borde); border-radius:12px; padding:.9em 1.4em; width:100%; text-align:center; margin-bottom:2rem; transition:border-color .3s, background .3s; }
.btn-agregar-ventana:hover{ border-color:var(--mostaza); background:color-mix(in srgb, var(--mostaza) 8%, transparent); }
.campo-comentario{ margin-bottom:1.8rem; }
.cotizador-error{ color:var(--carbon); background:color-mix(in srgb, var(--mostaza) 22%, var(--crema)); border:1px solid var(--mostaza); border-radius:10px; padding:1em 1.2em; margin-bottom:1.4rem; font-size:.92rem; font-weight:600; }
.cotizador-error:empty{ display:none; }
.cotizador-nota{ margin-top:1.2rem; font-size:.82rem; }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.testimonios-cabecera{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.4rem; margin-bottom:2.8rem; }
.testimonios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.tarjeta-testimonio{ background:var(--superficie); border:1px solid var(--borde); border-radius:16px; padding:1.8rem; display:flex; flex-direction:column; gap:.9rem; }
.estrellas{ color:var(--carbon); letter-spacing:.1em; }
.testimonio-texto{ font-size:.95rem; font-style:italic; }
.testimonio-texto.recortado{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.testimonio-marcador{ font-weight:700; }
.testimonio-leer-mas{
  align-self:flex-start; font-family:var(--fuente-texto); font-size:.8rem; font-weight:700;
  color:var(--carbon); background:none; border:none; border-bottom:1px solid var(--borde);
  padding:0 0 .1em; cursor:pointer; margin-top:-.5rem;
}
.testimonio-leer-mas:hover{ border-color:var(--carbon); }
.testimonio-autor{ font-size:.85rem; font-weight:700; margin-top:auto; }
.testimonio-autor span{ font-weight:400; }
.ver-resenas{ margin-top:2.4rem; text-align:center; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); }
.lista-datos{ display:flex; flex-direction:column; gap:1.1rem; margin-top:2rem; }
.fila-dato{ display:flex; gap:.9rem; align-items:flex-start; font-size:.95rem; }
.fila-dato svg{ width:19px; height:19px; flex:none; margin-top:.15em; color:var(--mostaza); }
.redes-contacto{ margin-top:1.8rem; display:flex; gap:.8rem; }
.redes-contacto a{ width:44px; height:44px; border-radius:50%; border:1px solid var(--borde-osc); display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s, border-color .3s; }
.redes-contacto a:hover{ background:var(--mostaza); border-color:var(--mostaza); color:var(--carbon); }
.redes-contacto svg{ width:18px; height:18px; }

.formulario-contacto{ background:color-mix(in srgb, var(--crema) 6%, transparent); border:1px solid var(--borde-osc); border-radius:18px; padding:clamp(1.6rem,3vw,2.2rem); }
.formulario-contacto .campo{ margin-bottom:1.2rem; }
.formulario-contacto .campo label{ color:var(--crema); }
.formulario-contacto input, .formulario-contacto textarea{ background:color-mix(in srgb, var(--crema) 8%, transparent); border-color:var(--borde-osc); color:var(--crema); }
.formulario-contacto ::placeholder{ color:color-mix(in srgb, var(--crema) 50%, transparent); }

.mapa-contacto{ border-radius:20px; overflow:hidden; border:1px solid var(--borde-osc); min-height:280px; margin-top:2.2rem; }
.mapa-contacto iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-lista{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.tarjeta-articulo{ background:var(--superficie); border:1px solid var(--borde); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.tarjeta-articulo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.tarjeta-articulo-info{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.tarjeta-articulo-info time{ font-family:var(--fuente-datos); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-suave); }
.tarjeta-articulo-info h3{ font-family:var(--fuente-texto); font-size:1.05rem; font-weight:700; }
.blog-vacio{
  border:1.5px dashed var(--borde); border-radius:18px; padding:clamp(2.5rem,6vw,4.5rem) 2rem; text-align:center;
}
.blog-vacio h2{ font-size:1.6rem; margin-bottom:.9rem; }
.blog-vacio p{ max-width:42ch; margin-inline:auto; color:var(--texto-suave); }

.articulo{ max-width:var(--ancho-texto); margin-inline:auto; }
.articulo-cabecera time{ font-family:var(--fuente-datos); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave); }
.articulo-cabecera h1{ font-size:clamp(2rem,4vw,2.8rem); margin-top:.8rem; }
.articulo-cuerpo{ margin-top:2.4rem; }
.articulo-cuerpo h2{ font-size:1.5rem; margin-top:2.2rem; margin-bottom:.9rem; }
.articulo-cuerpo p{ margin-bottom:1.1rem; font-size:1.02rem; color:var(--texto-suave); }
.articulo-cuerpo img{ border-radius:16px; margin:1.8rem 0; }

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */
footer{ background:var(--carbon); color:color-mix(in srgb, var(--crema) 70%, transparent); padding:3.5rem 0 2rem; border-top:1px solid var(--borde-osc); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; padding-bottom:2.4rem; }
.footer-marca{ display:flex; align-items:center; gap:.3rem; color:var(--crema); margin-bottom:1rem; }
.footer-marca svg, .footer-marca img{ width:29px; height:29px; object-fit:contain; }
.footer-marca .brand-mark-plate{ border-radius:8px; }
.footer-marca b{ font-family:var(--fuente-texto); font-weight:800; letter-spacing:-.01em; text-transform:uppercase; }
.footer-desc{ font-size:.88rem; line-height:1.6; max-width:32ch; }
.footer-col h4{ font-family:var(--fuente-datos); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--crema); margin-bottom:1rem; opacity:.85; }
.footer-col ul{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col a:hover{ color:var(--crema); }
.footer-fila{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.2rem; padding-top:1.6rem; border-top:1px solid var(--borde-osc); }
.footer-fila > p{ font-size:.8rem; }

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP (en todas las páginas)
   ========================================================================== */
.wa-flotante{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:60; width:60px; height:60px; border-radius:50%;
  background:var(--mostaza); color:var(--carbon); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--carbon) 55%, transparent);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .25s;
}
.wa-flotante:hover{ transform:scale(1.08); background:color-mix(in srgb, var(--mostaza) 80%, var(--carbon) 20%); }
.wa-flotante svg{ width:28px; height:28px; }

/* ==========================================================================
   RESPONSIVE — celulares y tablets (mobile-first: estas reglas ajustan
   la versión de escritorio hacia abajo)
   ========================================================================== */
@media (max-width:960px){
  .nav-principal{ display:none; }
  .menu-toggle{ display:flex; }
  .hero-cifras, .cifras-grid{ grid-template-columns:repeat(2,1fr); }
  .ventajas-grid{ grid-template-columns:repeat(2,1fr); }
  .tarjeta-producto.destacada{ flex-direction:column; }
  .tarjeta-producto.destacada .foto-producto{ width:100%; aspect-ratio:16/10; }
  .pasos-grid{ grid-template-columns:repeat(2,1fr); }
  .pasos-grid::before{ display:none; }
  .datos-cliente{ grid-template-columns:1fr; }
  .ventana-grid{ grid-template-columns:1fr 1fr; }
  .testimonios-grid{ grid-template-columns:1fr; }
  .contacto-grid{ grid-template-columns:1fr; }
  .galeria-grid{ grid-template-columns:repeat(3,1fr); }
  .ficha-producto{ grid-template-columns:1fr; }
  .ficha-foto{ position:static; }
  .blog-lista{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:2rem; }
}
@media (max-width:620px){
  .ventajas-grid, .pasos-grid{ grid-template-columns:1fr; }
  .ventana-grid{ grid-template-columns:1fr; }
  .franja-lista li{ border-right:none; padding:0 1rem; }
  .seccion{ padding:4.5rem 0; }
  .wa-flotante{ width:54px; height:54px; right:.9rem; bottom:.9rem; }
  .galeria-grid{ grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .blog-lista{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-cifras, .cifras-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; }
}