/* ============================================================
   LIGNUS — Maquinaria para pellet
   Paleta derivada del verde real de las máquinas (#165719 medido
   sobre las fotografías originales de taller).
   ============================================================ */

:root {
  --grafito:      #16191B;
  --grafito-2:    #1F2427;
  --grafito-3:    #2C3237;
  --marfil:       #F5F3EE;
  --marfil-2:     #E8E5DD;
  --verde:        #1E7A32;
  --verde-hondo:  #123D18;
  --verde-senal:  #46C155;
  --acero:        #8B949B;
  --acero-claro:  #B9C0C5;
  --linea:        #D6D2C8;
  --linea-oscura: #383F44;

  --ancho: 1220px;

  /* Profundidad, curvas y gradacion comun de fotografia.
     Anadidos en el pase de estetica: se usan en toda la hoja. */
  --sombra-baja:  0 1px 2px rgba(14,20,16,.05), 0 2px 8px rgba(14,20,16,.05);
  --sombra-media: 0 2px 6px rgba(14,20,16,.06), 0 14px 34px rgba(14,20,16,.11);
  --sombra-alta:  0 4px 10px rgba(14,20,16,.08), 0 26px 62px rgba(14,20,16,.17);
  --curva: cubic-bezier(.22,.61,.36,1);
  --grado: saturate(.94) contrast(1.05) brightness(.99);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", var(--sans);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--grafito);
  background: var(--marfil);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--verde-hondo); }

h1, h2, h3, h4 {
  font-family: var(--cond);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7vw, 5.2rem); text-transform: uppercase; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
p  { margin: 0 0 1.1em; }

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.estrecho  { width: min(100% - 2.5rem, 780px); margin-inline: auto; }

/* ---------- Etiqueta de sección ---------- */
.etiqueta {
  font-family: var(--cond);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verde);
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
}
.etiqueta::before { content: ""; width: 34px; height: 2px; background: var(--verde); flex: none; }
.oscuro .etiqueta { color: var(--verde-senal); }
.oscuro .etiqueta::before { background: var(--verde-senal); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(22,25,27,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea-oscura);
}
.cabecera-inner {
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}
.marca { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; margin-right: auto; }
.marca strong {
  font-family: var(--cond); font-size: 1.85rem; font-weight: 800;
  letter-spacing: .13em; color: var(--marfil); text-transform: uppercase; line-height: 1;
}
.marca small {
  font-family: var(--cond); font-size: .74rem; font-weight: 500;
  letter-spacing: .19em; color: var(--acero); text-transform: uppercase;
}
.nav-esc { display: flex; gap: 1.6rem; }
.nav-esc a {
  font-family: var(--cond); font-size: 1.08rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--acero-claro); text-decoration: none; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav-esc a:hover, .nav-esc a[aria-current="page"] { color: var(--marfil); border-bottom-color: var(--verde-senal); }

.boton-wsp {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--verde); color: #fff; text-decoration: none;
  font-family: var(--cond); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .62rem 1.15rem; border-radius: 2px; white-space: nowrap;
  transition: background .15s;
}
.boton-wsp:hover { background: var(--verde-senal); color: #0C1A0F; }

.menu-btn {
  display: none; background: none; border: 1px solid var(--linea-oscura);
  color: var(--marfil); padding: .45rem .7rem; border-radius: 2px;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.nav-movil { display: none; flex-direction: column; background: var(--grafito-2); border-top: 1px solid var(--linea-oscura); }
.nav-movil a {
  padding: .85rem 1.25rem; color: var(--marfil-2); text-decoration: none;
  font-family: var(--cond); font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--linea-oscura);
}
.nav-movil.abierto { display: flex; }

/* ---------- Portada ---------- */
.portada { position: relative; background: var(--grafito); overflow: hidden; isolation: isolate; }
.portada-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; opacity: .78;
}
/* Velo en tres capas. El radial concentra la densidad justo bajo el
   texto, así el titular se lee sin necesitar text-shadow y el verde
   real de la máquina sigue respirando a la derecha del cuadro. */
.portada-velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(122% 96% at 10% 46%, rgba(6,9,10,.93) 0%, rgba(6,9,10,.66) 36%, rgba(6,9,10,0) 74%),
    linear-gradient(100deg, rgba(9,12,13,.88) 0%, rgba(9,12,13,.70) 36%, rgba(9,12,13,.32) 64%, rgba(9,12,13,.14) 100%),
    linear-gradient(to top, rgba(9,12,13,.74) 0%, rgba(9,12,13,0) 44%);
}
.portada-cont {
  position: relative;
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  max-width: 900px;
}
.portada h1 { color: var(--marfil); margin-bottom: .35em; }
.portada h1 em { font-style: normal; color: var(--verde-senal); display: block; }
.portada-bajada {
  font-size: clamp(1.06rem, 1.9vw, 1.32rem); color: #DDE2E4;
  max-width: 47ch; margin-bottom: 2rem;
}
.portada-acciones { display: flex; flex-wrap: wrap; gap: .9rem; }

.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--cond); font-size: 1.12rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .82rem 1.5rem; border-radius: 2px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: .15s;
}
.boton-primario { background: var(--verde); color: #fff; }
.boton-primario:hover { background: var(--verde-senal); color: #0C1A0F; }
.boton-linea { border-color: var(--acero); color: var(--marfil); }
.boton-linea:hover { border-color: var(--verde-senal); color: var(--verde-senal); }
.boton-oscuro { background: var(--grafito); color: var(--marfil); }
.boton-oscuro:hover { background: var(--verde-hondo); color: #fff; }

/* ---------- Barra de cifras ---------- */
.cifras {
  background: var(--verde-hondo); color: var(--marfil);
  border-top: 3px solid var(--verde-senal);
}
.cifras-grid {
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,.13);
}
.cifra { background: var(--verde-hondo); padding: 1.7rem 1.3rem; }
.cifra strong {
  display: block; font-family: var(--cond); font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 800; line-height: 1; color: #fff;
}
.cifra span {
  display: block; margin-top: .45rem; font-size: .84rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* ---------- Secciones ---------- */
.seccion { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.seccion.oscuro { background: var(--grafito); color: var(--marfil-2); }
.seccion.oscuro h2, .seccion.oscuro h3 { color: var(--marfil); }
.seccion.tono { background: var(--marfil-2); }
.seccion-cabeza { max-width: 60ch; margin-bottom: 2.8rem; }
.seccion-cabeza p { font-size: 1.1rem; color: #4A5257; }
.oscuro .seccion-cabeza p { color: var(--acero-claro); }

/* ---------- Tabla de especificaciones ---------- */
.tabla-envoltura { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--linea); background: #fff; }
.oscuro .tabla-envoltura { border-color: var(--linea-oscura); background: var(--grafito-2); }
table.specs { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .96rem; }
table.specs caption {
  text-align: left; padding: .9rem 1.1rem; font-family: var(--cond);
  font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--grafito); color: var(--marfil);
}
table.specs th, table.specs td { padding: .78rem 1.1rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.oscuro table.specs th, .oscuro table.specs td { border-bottom-color: var(--linea-oscura); }
table.specs thead th {
  font-family: var(--cond); font-size: .92rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--marfil-2); color: var(--grafito);
}
.oscuro table.specs thead th { background: var(--grafito-3); color: var(--marfil); }
table.specs tbody tr:last-child th, table.specs tbody tr:last-child td { border-bottom: 0; }
table.specs tbody th { font-weight: 700; font-family: var(--cond); font-size: 1.15rem; letter-spacing: .04em; }
table.specs td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.destacado { color: var(--verde); font-weight: 700; }
.oscuro .destacado { color: var(--verde-senal); }

/* ---------- Rejillas ---------- */
.rejilla { display: grid; gap: 1.6rem; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.tarjeta {
  background: #fff; border: 1px solid var(--linea);
  display: flex; flex-direction: column; overflow: hidden;
}
.oscuro .tarjeta { background: var(--grafito-2); border-color: var(--linea-oscura); }
.tarjeta img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tarjeta-cuerpo { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-cuerpo h3 { margin-bottom: .35em; }
.tarjeta-cuerpo p { font-size: .97rem; color: #4A5257; }
.oscuro .tarjeta-cuerpo p { color: var(--acero-claro); }
.tarjeta-pie { margin-top: auto; padding-top: 1rem; }
.dato-clave {
  font-family: var(--cond); font-size: 1.5rem; font-weight: 700;
  color: var(--verde); letter-spacing: .02em; line-height: 1.1;
}
.oscuro .dato-clave { color: var(--verde-senal); }
.dato-pie { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--acero); }

/* ---------- Bloque medio/texto ---------- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.duo img { border: 1px solid var(--linea); }
.oscuro .duo img { border-color: var(--linea-oscura); }
.pie-foto { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--acero); margin-top: .6rem; }

/* ---------- Lista de equipos ---------- */
.lista-equipos { list-style: none; padding: 0; margin: 1.2rem 0; counter-reset: eq; }
.lista-equipos li {
  counter-increment: eq; display: flex; gap: 1rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px dashed var(--linea); font-size: .98rem;
}
.oscuro .lista-equipos li { border-bottom-color: var(--linea-oscura); }
.lista-equipos li::before {
  content: counter(eq, decimal-leading-zero);
  font-family: var(--cond); font-weight: 700; font-size: 1.05rem;
  color: var(--verde); flex: none; min-width: 2ch;
}
.oscuro .lista-equipos li::before { color: var(--verde-senal); }

/* ---------- Aviso ---------- */
.aviso {
  border-left: 3px solid var(--verde);
  background: #fff; padding: 1.1rem 1.3rem; margin: 1.8rem 0;
  font-size: .95rem; color: #4A5257;
}
.oscuro .aviso { background: var(--grafito-2); border-left-color: var(--verde-senal); color: var(--acero-claro); }
.aviso strong { color: var(--grafito); }
.oscuro .aviso strong { color: var(--marfil); }

/* ---------- Proyectos ---------- */
.mapa-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.oscuro .mapa-proyectos { background: var(--linea-oscura); border-color: var(--linea-oscura); }
.proyecto { background: #fff; padding: 1.3rem 1.25rem; }
.oscuro .proyecto { background: var(--grafito-2); }
.proyecto strong { display: block; font-family: var(--cond); font-size: 1.42rem; letter-spacing: .04em; text-transform: uppercase; }
.proyecto span { display: block; font-size: .9rem; color: #5A6267; margin-top: .2rem; }
.oscuro .proyecto span { color: var(--acero); }
.proyecto em { display: block; font-style: normal; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); margin-top: .55rem; }
.oscuro .proyecto em { color: var(--verde-senal); }

/* ---------- Preguntas ---------- */
.pregunta { border-bottom: 1px solid var(--linea); padding: 1.4rem 0; }
.oscuro .pregunta { border-bottom-color: var(--linea-oscura); }
.pregunta h3 { margin-bottom: .4em; }
.pregunta p:last-child { margin-bottom: 0; }

/* ---------- Formulario ---------- */
.form-cotizacion { background: #fff; border: 1px solid var(--linea); padding: clamp(1.5rem, 3vw, 2.3rem); }
.oscuro .form-cotizacion { background: var(--grafito-2); border-color: var(--linea-oscura); }
.form-cotizacion label { display: block; margin-bottom: 1.1rem; }
.form-cotizacion label > span {
  display: block; font-family: var(--cond); font-size: 1rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem;
}
.form-cotizacion input, .form-cotizacion select, .form-cotizacion textarea {
  width: 100%; padding: .72rem .85rem; font-family: inherit; font-size: 1rem;
  border: 1px solid var(--linea); border-radius: 2px; background: var(--marfil);
  color: var(--grafito);
}
.oscuro .form-cotizacion input, .oscuro .form-cotizacion select, .oscuro .form-cotizacion textarea {
  background: var(--grafito); border-color: var(--linea-oscura); color: var(--marfil);
}
.form-cotizacion input:focus, .form-cotizacion select:focus, .form-cotizacion textarea:focus {
  outline: 2px solid var(--verde); outline-offset: 1px;
}
.form-nota { font-size: .87rem; color: var(--acero); margin-top: .9rem; }

/* ---------- Contacto directo ---------- */
.canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.canal { border: 1px solid var(--linea-oscura); padding: 1.4rem; background: var(--grafito-2); }
.canal strong { display: block; font-family: var(--cond); font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marfil); margin-bottom: .3rem; }
.canal a { color: var(--verde-senal); font-size: 1.15rem; text-decoration: none; }
.canal a:hover { text-decoration: underline; }
.canal p { font-size: .9rem; color: var(--acero); margin: .4rem 0 0; }

/* ---------- Llamado final ---------- */
.llamado { background: var(--verde-hondo); color: var(--marfil); text-align: center; padding: clamp(3rem, 7vw, 5rem) 0; }
.llamado h2 { color: #fff; }
.llamado p { max-width: 55ch; margin-inline: auto; color: rgba(255,255,255,.82); font-size: 1.1rem; }

/* ---------- Pie ---------- */
.pie { background: var(--grafito); color: var(--acero); padding: 3rem 0 2rem; font-size: .93rem; }
.pie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.pie h4 { font-size: 1.05rem; letter-spacing: .14em; color: var(--marfil); margin-bottom: .9rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .5rem; }
.pie a { color: var(--acero-claro); text-decoration: none; }
.pie a:hover { color: var(--verde-senal); }
.pie-abajo { border-top: 1px solid var(--linea-oscura); padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; }

/* ---------- Migas ---------- */
.migas { font-size: .85rem; color: var(--acero); padding: 1.1rem 0 0; }
.migas a { color: var(--acero); text-decoration: none; }
.migas a:hover { color: var(--verde); text-decoration: underline; }

/* ---------- Artículo ---------- */
.articulo { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.articulo h2 { margin-top: 2.4rem; }
.articulo h3 { margin-top: 1.8rem; }
.articulo ul, .articulo ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.articulo li { margin-bottom: .45rem; }
.fecha { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acero); margin-bottom: 1.5rem; }

/* ---------- Video ---------- */
.video-bloque { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.video-marco { max-width: 380px; border: 1px solid var(--linea-oscura); background: #000; }
.video-marco video { width: 100%; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .nav-esc { display: none; }
  .menu-btn { display: block; }
  .cifras-grid { grid-template-columns: repeat(2, 1fr); }
  .cabecera .boton-wsp { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .cifras-grid { grid-template-columns: 1fr; }
  .marca small { display: none; }
}

@media print {
  .cabecera, .nav-movil, .llamado, .boton, .boton-wsp { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Chat de calificación — widget flotante
   ============================================================ */
.chat-burbuja {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--verde); color: #fff; border: none; cursor: pointer;
  font-family: var(--cond); font-size: 1.08rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .85rem 1.3rem; border-radius: 40px;
  box-shadow: 0 8px 28px rgba(9,20,12,.38);
  transition: background .15s, transform .15s;
}
.chat-burbuja:hover { background: var(--verde-senal); color: #0C1A0F; transform: translateY(-2px); }
.chat-burbuja[hidden] { display: none; }
.chat-burbuja .punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--verde-senal);
  box-shadow: 0 0 0 0 rgba(70,193,85,.7); animation: latido 2.4s infinite;
}
.chat-burbuja:hover .punto { background: #0C1A0F; box-shadow: none; animation: none; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(70,193,85,.7); }
  70%  { box-shadow: 0 0 0 11px rgba(70,193,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,193,85,0); }
}
@media (prefers-reduced-motion: reduce) { .chat-burbuja .punto { animation: none; } }

.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 91;
  width: min(calc(100vw - 40px), 390px); max-height: min(calc(100vh - 40px), 620px);
  display: flex; flex-direction: column;
  background: var(--marfil); border: 1px solid var(--linea-oscura);
  border-radius: 4px; box-shadow: 0 18px 50px rgba(9,14,16,.45); overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-cab {
  background: var(--grafito); color: var(--marfil);
  padding: .95rem 1.1rem; display: flex; align-items: center; gap: .7rem; flex: none;
}
.chat-cab strong {
  font-family: var(--cond); font-size: 1.22rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.chat-cab small { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acero); margin-top: .18rem; }
.chat-cerrar {
  margin-left: auto; background: none; border: 0; color: var(--acero-claro);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .25rem;
}
.chat-cerrar:hover { color: #fff; }

.chat-cuerpo { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.chat-msj { max-width: 88%; padding: .7rem .9rem; border-radius: 3px; font-size: .95rem; line-height: 1.55; }
.chat-msj.bot { background: #fff; border: 1px solid var(--linea); align-self: flex-start; }
.chat-msj.yo  { background: var(--verde-hondo); color: #fff; align-self: flex-end; }
.chat-msj p { margin: 0 0 .55em; }
.chat-msj p:last-child { margin: 0; }
.chat-msj strong { color: var(--verde-hondo); }
.chat-msj.yo strong, .chat-msj.bot.destacada strong { color: inherit; }
.chat-msj.bot.destacada { border-left: 3px solid var(--verde); }

.chat-opciones { display: flex; flex-wrap: wrap; gap: .45rem; align-self: flex-start; max-width: 100%; }
.chat-op {
  background: #fff; border: 1px solid var(--verde); color: var(--verde-hondo);
  font-family: inherit; font-size: .88rem; padding: .45rem .8rem;
  border-radius: 40px; cursor: pointer; transition: .12s;
}
.chat-op:hover { background: var(--verde); color: #fff; }

.chat-pie { flex: none; border-top: 1px solid var(--linea); padding: .7rem; background: #fff; }
.chat-forma { display: flex; gap: .5rem; }
.chat-forma input {
  flex: 1; padding: .6rem .75rem; font-family: inherit; font-size: .95rem;
  border: 1px solid var(--linea); border-radius: 3px; background: var(--marfil); color: var(--grafito);
}
.chat-forma input:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.chat-forma button {
  background: var(--verde); color: #fff; border: 0; border-radius: 3px;
  padding: 0 .95rem; cursor: pointer; font-family: var(--cond);
  font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.chat-forma button:hover { background: var(--verde-hondo); }
.chat-aviso { font-size: .72rem; color: var(--acero); margin: .55rem 0 0; line-height: 1.45; }
.chat-aviso a { color: var(--acero); }

.chat-escribiendo { display: flex; gap: 4px; align-items: center; padding: .7rem .9rem; align-self: flex-start; }
.chat-escribiendo span { width: 6px; height: 6px; border-radius: 50%; background: var(--acero); animation: puntos 1.3s infinite; }
.chat-escribiendo span:nth-child(2) { animation-delay: .2s; }
.chat-escribiendo span:nth-child(3) { animation-delay: .4s; }
@keyframes puntos { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

@media (max-width: 520px) {
  .chat-panel { right: 10px; left: 10px; bottom: 10px; width: auto; max-height: calc(100vh - 20px); }
  .chat-burbuja { right: 14px; bottom: 14px; font-size: 1rem; padding: .75rem 1.1rem; }
}

/* ============================================================
   Cotizador
   ============================================================ */
.cotizador-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.8rem); align-items: start; }
@media (max-width: 860px) { .cotizador-grid { grid-template-columns: 1fr; } }

.cot-form { background: #fff; border: 1px solid var(--linea); padding: clamp(1.3rem, 2.5vw, 2rem); }
.cot-paso {
  display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .55rem;
  font-family: var(--cond); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.cot-paso i {
  font-style: normal; font-size: .82rem; color: #fff; background: var(--verde);
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; flex: none;
}
.cot-campo { margin-bottom: 1.4rem; }
.cot-campo:last-child { margin-bottom: 0; }
.cot-campo select, .cot-campo input {
  width: 100%; padding: .72rem .85rem; font-family: inherit; font-size: 1rem;
  border: 1px solid var(--linea); border-radius: 2px; background: var(--marfil); color: var(--grafito);
}
.cot-campo select:focus, .cot-campo input:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.cot-ayuda { font-size: .84rem; color: #5A6267; margin: .4rem 0 0; }

.cot-panel { position: sticky; top: 94px; background: var(--grafito); color: var(--marfil-2); border-top: 3px solid var(--verde-senal); }
@media (max-width: 860px) { .cot-panel { position: static; } }
.cot-panel-cuerpo { padding: clamp(1.3rem, 2.5vw, 1.9rem); }
.cot-titulo { font-family: var(--cond); font-size: clamp(1.5rem,2.6vw,1.95rem); font-weight: 700; color: #fff; line-height: 1.1; margin: 0 0 .3rem; text-transform: uppercase; }
.cot-sub { font-size: .9rem; color: var(--acero); margin: 0 0 1.2rem; }
.cot-valor {
  font-family: var(--cond); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800;
  color: var(--verde-senal); line-height: 1; margin: 0; letter-spacing: .01em;
}
.cot-valor-pie { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acero); margin: .45rem 0 1.3rem; }
.cot-bloque { border-top: 1px solid var(--linea-oscura); padding-top: 1.1rem; margin-top: 1.1rem; }
.cot-bloque h4 { font-family: var(--cond); font-size: .95rem; letter-spacing: .15em; text-transform: uppercase; color: var(--marfil); margin: 0 0 .7rem; }
.cot-lista { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.cot-lista li { padding: .32rem 0 .32rem 1.1rem; position: relative; color: var(--acero-claro); }
.cot-lista li::before { content: "—"; position: absolute; left: 0; color: var(--verde-senal); }
.cot-datos-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .8rem; }
.cot-dato { background: var(--grafito-2); padding: .75rem .85rem; border-left: 2px solid var(--verde); }
.cot-dato span { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--acero); }
.cot-dato strong { display: block; font-family: var(--cond); font-size: 1.25rem; color: #fff; line-height: 1.15; margin-top: .18rem; }
.cot-alerta { background: rgba(70,193,85,.1); border-left: 3px solid var(--verde-senal); padding: .8rem .95rem; margin-top: 1.1rem; font-size: .9rem; color: var(--marfil-2); }
.cot-cta { padding: 0 clamp(1.3rem,2.5vw,1.9rem) clamp(1.3rem,2.5vw,1.9rem); }
.cot-cta .boton { width: 100%; justify-content: center; }

.cot-datos { background: #fff; border: 1px solid var(--linea); padding: clamp(1.3rem,2.5vw,2rem); margin-top: 1.5rem; }
.cot-datos[hidden] { display: none; }
.cot-datos h3 { margin-bottom: .3em; }
.cot-datos p.intro { font-size: .95rem; color: #4A5257; }
.cot-datos label { display: block; margin-bottom: 1rem; }
.cot-datos label > span { display: block; font-family: var(--cond); font-size: .98rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
.cot-datos input {
  width: 100%; padding: .7rem .85rem; font-family: inherit; font-size: 1rem;
  border: 1px solid var(--linea); border-radius: 2px; background: var(--marfil); color: var(--grafito);
}
.cot-datos input:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.cot-datos .par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .cot-datos .par { grid-template-columns: 1fr; } }
.cot-error { color: #C0392B; font-size: .88rem; margin: .5rem 0 0; }
.cot-listo { background: var(--verde-hondo); color: #fff; padding: 1.2rem 1.3rem; margin-top: 1.2rem; }
.cot-listo[hidden] { display: none; }
.cot-listo strong { color: #fff; }
.cot-listo a { color: var(--verde-senal); }

/* ============================================================
   Línea en operación — recorrida con el scroll
   ============================================================ */
.linea-scroll { background: #0B0E0F; color: var(--marfil); }
.linea-pista { position: relative; height: 320vh; }
.linea-fija {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
}
.linea-texto { max-width: 46ch; }
.linea-texto h2 { color: #fff; }
.linea-texto > p { color: var(--acero-claro); }

.linea-pasos { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.linea-paso {
  padding: .85rem 0 .85rem 1.6rem; position: relative;
  border-top: 1px solid var(--linea-oscura);
  color: #6E777D; transition: color .35s;
  font-family: var(--cond); font-size: 1.22rem; letter-spacing: .04em; text-transform: uppercase;
}
.linea-paso::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #333B40; transition: background .35s, box-shadow .35s;
}
.linea-paso.activo { color: #fff; }
.linea-paso.activo::before { background: var(--verde-senal); box-shadow: 0 0 0 4px rgba(70,193,85,.18); }

.linea-marco {
  position: relative; justify-self: center;
  width: min(100%, 380px); aspect-ratio: 478 / 850; max-height: 78vh;
  background: #0B0E0F; border: 1px solid var(--linea-oscura); overflow: hidden;
}
.linea-lienzo { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s; }
.linea-lista .linea-lienzo, .linea-lienzo.visible { opacity: 1; }
.linea-scroll .linea-lienzo { opacity: 1; }

.linea-carga {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 60%; height: 2px; background: rgba(255,255,255,.16);
}
.linea-carga i { display: block; height: 100%; width: 0; background: var(--verde-senal); transition: width .2s; }
.linea-carga[hidden] { display: none; }

.linea-nota {
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acero); margin-top: 1.4rem;
}

/* Respaldo: móvil, movimiento reducido o sin JS */
.linea-respaldo { display: none; }
.linea-simple .linea-pista { height: auto; }
.linea-simple .linea-fija { position: static; height: auto; padding: clamp(3rem,8vw,5rem) 0; grid-template-columns: 1fr; }
.linea-simple .linea-marco { display: none; }
.linea-simple .linea-respaldo { display: block; width: min(100%, 380px); justify-self: center; }
.linea-simple .linea-paso { color: var(--marfil-2); }
.linea-simple .linea-paso::before { background: var(--verde-senal); }

@media (max-width: 899px) {
  .linea-pista { height: auto; }
  .linea-fija { position: static; height: auto; padding: clamp(3rem,8vw,5rem) 0; grid-template-columns: 1fr; }
  .linea-marco { display: none; }
  .linea-respaldo { display: block; width: min(100%, 380px); justify-self: center; }
  .linea-paso { color: var(--marfil-2); }
  .linea-paso::before { background: var(--verde-senal); }
}
@media (prefers-reduced-motion: reduce) {
  .linea-pista { height: auto; }
  .linea-fija { position: static; height: auto; padding: clamp(3rem,8vw,5rem) 0; }
  .linea-marco { display: none; }
  .linea-respaldo { display: block; }
}
.linea-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: .45; filter: blur(1px);
  transition: opacity .6s;
}
.linea-pinta .linea-poster { opacity: 0; }

/* ============================================================
   PASE DE ESTÉTICA
   Todo lo de aquí abajo es capa visual: profundidad, movimiento
   y gradación. No cambia ninguna medida ni ningún contenido.
   Si algo molesta, se borra desde esta línea hasta el final y el
   sitio vuelve exactamente a como estaba.
   ============================================================ */

/* ---------- Base: foco, selección, tipografía fina ---------- */
:focus-visible { outline: 2px solid var(--verde-senal); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--verde-senal); color: #0C1A0F; }

h1, h2 { letter-spacing: -0.012em; }
.portada h1 { letter-spacing: -0.018em; }

/* ---------- Gradación común de la fotografía ----------
   Las 20 fotos vienen de sesiones distintas de taller y cada una
   trae su propia luz. Este filtro las empareja para que la página
   se lea como un solo material. El reel NO se toca: ya trae su
   gradación de cine hecha en el montaje. */
.tarjeta img,
.duo img,
.portada-img,
.linea-lienzo,
.linea-respaldo,
.video-marco video { filter: var(--grado); }

/* ---------- Cabecera ---------- */
.cabecera { transition: background .3s ease, box-shadow .35s ease; }
.cabecera-inner { transition: min-height .3s var(--curva); }
.cabecera.compacta {
  background: rgba(18,21,23,.985);
  box-shadow: 0 10px 34px rgba(6,9,10,.34);
}
.cabecera.compacta .cabecera-inner { min-height: 58px; }
.cabecera.compacta .marca-signo { width: 25px; height: 25px; }
.cabecera.compacta .marca strong { font-size: 1.6rem; }

/* La matriz perforada del favicon, que hasta ahora solo vivía en la
   pestaña del navegador. Al pasar el mouse gira 45 grados: son ocho
   perforaciones, así que cae exacta sobre sí misma — indexa como
   una matriz de verdad. */
.marca { align-items: center; }
.marca-signo {
  width: 30px; height: 30px; flex: none; color: var(--verde-senal);
  transition: transform .75s var(--curva), width .3s var(--curva), height .3s var(--curva);
}
.marca:hover .marca-signo { transform: rotate(45deg); }
.marca-texto { display: flex; align-items: baseline; gap: .55rem; }
.marca strong { transition: font-size .3s var(--curva); }

.nav-esc a { position: relative; border-bottom: 0; padding-bottom: 4px; transition: color .22s ease; }
.nav-esc a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--verde-senal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--curva);
}
.nav-esc a:hover::after, .nav-esc a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Portada con el reel de fondo ----------
   La foto queda siempre debajo. El video se carga y aparece encima
   solo si el navegador lo permite: en móvil, con ahorro de datos o
   con "reducir movimiento" no se descarga y queda la foto. */
.portada-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  opacity: 0; pointer-events: none;
  transition: opacity 1.4s ease;
}
.portada-video.corriendo { opacity: .82; }

/* Grano fino sobre la portada: pega la foto y el video en una sola
   superficie y disimula el bandeado de los degradados del velo. */
.portada::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grano); opacity: .055; mix-blend-mode: overlay;
}

/* Guía de scroll bajo los botones */
.portada-cont::after {
  content: ""; display: block; width: 1px; height: 52px;
  margin-top: clamp(2rem, 5vw, 3.2rem);
  background: linear-gradient(to bottom, var(--verde-senal), rgba(70,193,85,0));
  animation: cae 2.8s var(--curva) infinite;
}
@keyframes cae {
  0%   { opacity: 0; transform: scaleY(.25); transform-origin: top; }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}

/* ---------- Aparición al hacer scroll ----------
   El JS marca los elementos; sin JS no se marca nada y todo se ve
   como siempre. Va antes de las tarjetas a propósito: así el
   :hover de la tarjeta gana sobre el transform de la aparición. */
[data-rev] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .75s var(--curva), transform .75s var(--curva);
  transition-delay: var(--rev-d, 0ms);
}
[data-rev].visto { opacity: 1; transform: none; }

[data-rev-grupo] > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
[data-rev-grupo].visto > * { opacity: 1; transform: none; }

/* ---------- Tarjetas con profundidad ---------- */
.tarjeta {
  box-shadow: var(--sombra-baja);
  transition: transform .42s var(--curva), box-shadow .42s var(--curva), border-color .42s ease;
}
.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-media);
  border-color: rgba(30,122,50,.45);
}
.oscuro .tarjeta { box-shadow: none; }
.oscuro .tarjeta:hover {
  border-color: rgba(70,193,85,.5);
  box-shadow: 0 22px 52px rgba(0,0,0,.42);
}
.tarjeta img { transition: transform 1.05s var(--curva), filter .5s ease; }
.tarjeta:hover img { transform: scale(1.045); filter: var(--grado) brightness(1.04); }
.dato-clave { transition: color .3s ease; }
.tarjeta:hover .dato-clave { color: var(--verde-hondo); }
.oscuro .tarjeta:hover .dato-clave { color: #6BD97A; }

/* Fotos de bloque medio/texto: mismo tratamiento, sin el salto */
.duo img { box-shadow: var(--sombra-baja); }
.oscuro .duo img { box-shadow: 0 18px 44px rgba(0,0,0,.38); }

/* ---------- Botones ---------- */
.boton {
  transition: background .24s var(--curva), color .24s ease, border-color .24s ease,
              transform .18s var(--curva), box-shadow .28s var(--curva);
}
.boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-baja); }
.boton:active { transform: translateY(0); box-shadow: none; }
.boton-primario::after {
  content: "\2192"; font-size: .95em; line-height: 1;
  transition: transform .3s var(--curva);
}
.boton-primario:hover::after { transform: translateX(4px); }
.boton-wsp { transition: background .2s var(--curva), transform .18s var(--curva); }
.boton-wsp:hover { transform: translateY(-1px); }

/* ---------- Barra de cifras ----------
   Fondo con la perforación de una matriz, muy tenue. */
.cifras {
  position: relative;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.055) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
}
.cifras-grid { background: rgba(255,255,255,.13); }
.cifra { transition: background .35s ease; }
.cifra:hover { background: #16491F; }
.cifra strong { font-variant-numeric: tabular-nums; }

/* ---------- Secciones oscuras: banda perforada superior ---------- */
.seccion.oscuro, .llamado { position: relative; }
.seccion.oscuro::before, .llamado::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px;
  background-image: radial-gradient(circle at center, rgba(70,193,85,.42) 1.3px, transparent 1.4px);
  background-size: 22px 9px;
  pointer-events: none;
}
.llamado::before {
  background-image: radial-gradient(circle at center, rgba(255,255,255,.30) 1.3px, transparent 1.4px);
}

/* La sección clara con tono se separa con una línea, no con un corte */
.seccion.tono { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

/* ---------- Proyectos ---------- */
.proyecto { transition: background .3s ease, transform .3s var(--curva); }
.proyecto:hover { background: var(--marfil); transform: translateY(-2px); }
.oscuro .proyecto:hover { background: var(--grafito-3); }
.proyecto strong { transition: color .3s ease; }
.proyecto:hover strong { color: var(--verde); }

/* ---------- Tablas, avisos, preguntas ---------- */
.tabla-envoltura { box-shadow: var(--sombra-baja); }
.oscuro .tabla-envoltura { box-shadow: none; }
table.specs tbody tr { transition: background .2s ease; }
table.specs tbody tr:hover { background: rgba(30,122,50,.045); }
.oscuro table.specs tbody tr:hover { background: rgba(70,193,85,.07); }
.aviso { box-shadow: var(--sombra-baja); }
.oscuro .aviso { box-shadow: none; }
.pregunta h3 { transition: color .25s ease; }
.pregunta:hover h3 { color: var(--verde); }
.oscuro .pregunta:hover h3 { color: var(--verde-senal); }

/* ---------- Canales de contacto ---------- */
.canal { transition: transform .3s var(--curva), border-color .3s ease, background .3s ease; }
.canal:hover { transform: translateY(-3px); border-color: var(--verde); background: var(--grafito-3); }

/* ---------- Formularios y cotizador ---------- */
.form-cotizacion, .cot-form, .cot-datos { box-shadow: var(--sombra-baja); }
.oscuro .form-cotizacion { box-shadow: none; }
.cot-panel { box-shadow: var(--sombra-alta); }
.cot-dato { transition: border-color .3s ease, background .3s ease; }
.cot-dato:hover { border-left-color: var(--verde-senal); background: var(--grafito-3); }
.form-cotizacion input, .form-cotizacion select, .form-cotizacion textarea,
.cot-campo select, .cot-campo input, .cot-datos input {
  transition: border-color .2s ease, background .2s ease;
}
.form-cotizacion input:hover, .cot-campo select:hover,
.cot-campo input:hover, .cot-datos input:hover { border-color: var(--acero); }

/* ---------- Pie ---------- */
.pie { background-image: radial-gradient(circle at center, rgba(255,255,255,.02) 1.5px, transparent 1.6px); background-size: 26px 26px; }
.pie a { transition: color .2s ease; }

/* ---------- Chat ---------- */
.chat-burbuja { box-shadow: 0 10px 32px rgba(9,20,12,.42); }
.chat-panel { box-shadow: var(--sombra-alta), 0 18px 50px rgba(9,14,16,.45); }
.chat-op { transition: background .16s ease, color .16s ease, transform .16s var(--curva); }
.chat-op:hover { transform: translateY(-1px); }

/* ---------- Respeto por quien pidió menos movimiento ----------
   Nada de lo de arriba es información: si el sistema pide reducir
   movimiento, se apaga todo y el contenido queda igual de completo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rev], [data-rev-grupo] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .portada-cont::after { animation: none; opacity: .5; }
  .tarjeta:hover, .boton:hover, .proyecto:hover, .canal:hover,
  .boton-wsp:hover, .chat-op:hover { transform: none; }
  .tarjeta:hover img { transform: none; }
  .marca:hover .marca-signo { transform: none; }
  .portada-video { display: none; }
}

/* En pantallas chicas se apaga el peso visual que no aporta */
@media (max-width: 700px) {
  .portada-video { display: none; }
  .portada-cont::after { display: none; }
}

@media print {
  .portada-video, .portada::after, .portada-cont::after { display: none !important; }
  [data-rev], [data-rev-grupo] > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   VIDRIO, COTIZADOR Y CHAT — EN CLARO
   La primera versión de esto era oscura y quedó lúgubre: el
   cotizador era una caja negra y las respuestas se perdían
   detrás de demasiado vidrio. Ahora manda el azul claro, el
   blanco y el verde de las máquinas.

   La regla que ordena todo: el formulario es vidrio blanco, y
   la RESPUESTA es verde sólido. Lo que el visitante viene a
   leer no puede estar detrás de un desenfoque.
   ============================================================ */

:root {
  --azul:        #E9F1F7;
  --azul-2:      #F5FAFC;
  --azul-borde:  #C9DCE9;
  --azul-texto:  #55636D;

  --vidrio:        rgba(255,255,255,.80);
  --vidrio-borde:  rgba(255,255,255,.92);
  --sombra-vidrio: 0 16px 44px rgba(23,49,68,.15), 0 2px 6px rgba(23,49,68,.07);

  --verde-panel:   #16532A;
  --verde-panel-2: #103A1C;
  --verde-claro:   #A8ECB6;

  /* Chat en claro: fondo azulado, entrantes blancas, salientes
     verde suave. Los ticks azules se conservan porque son la
     señal que todo el mundo ya sabe leer. */
  --wa-fondo:  #EDF3F7;
  --wa-entra:  #FFFFFF;
  --wa-sale:   #D7F3CE;
  --wa-texto:  #16262E;
  --wa-tenue:  #71858F;
  --wa-check:  #2E9FD4;
}

/* ---------- El vidrio ---------- */
.vidrio {
  position: relative;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--vidrio-borde);
  border-radius: 14px;
  box-shadow: var(--sombra-vidrio), inset 0 1px 0 rgba(255,255,255,.95);
  color: var(--grafito);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background: #fff; }
}

/* ---------- La escena del cotizador ---------- */
.cot-escena {
  position: relative;
  background: linear-gradient(168deg, var(--azul) 0%, var(--azul-2) 58%, #FFFFFF 100%);
  color: var(--grafito);
  overflow: hidden;
  isolation: isolate;
}
.cot-escena-fondo {
  position: absolute; inset: 0; z-index: 0;
  background: url("../img/linea-peletizado-taller.jpg") center/cover no-repeat;
  opacity: .16;                      /* textura, no protagonista */
}
.cot-escena::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(78% 58% at 82% 4%, rgba(30,122,50,.13) 0%, rgba(233,241,247,0) 62%),
    linear-gradient(to bottom, rgba(233,241,247,.62) 0%, rgba(245,250,252,.82) 58%, #fff 100%);
}
.cot-escena > .envoltura,
.cot-escena > section { position: relative; z-index: 1; }

.cot-escena .migas, .cot-escena .migas a { color: #74858F; }
.cot-escena .migas a:hover { color: var(--verde); }

.cot-intro { padding: 1.4rem 0 2rem; }
.cot-intro h1 { font-size: clamp(2.05rem, 4.6vw, 3.3rem); color: var(--grafito); margin-bottom: .3em; }
.cot-intro .etiqueta { color: var(--verde); }
.cot-intro .etiqueta::before { background: var(--verde); }
.cot-bajada { font-size: 1.04rem; max-width: 60ch; color: var(--azul-texto); margin: 0; }

.cot-zona { padding-bottom: clamp(3rem, 7vw, 5rem); }

/* ---------- El cuadro compacto ---------- */
.cot-form { padding: clamp(1.05rem, 2vw, 1.45rem); color: var(--grafito); }
.cot-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
}
.cot-campo { margin-bottom: 0; }
.cot-campo:last-child { grid-column: 1 / -1; }
@media (max-width: 560px) { .cot-campos { grid-template-columns: 1fr; } }

.cot-form .cot-paso { font-size: .9rem; margin-bottom: .38rem; gap: .5rem; color: var(--grafito); }
.cot-form .cot-paso i { width: 19px; height: 19px; font-size: .72rem; }
.cot-form .cot-campo select,
.cot-form .cot-campo input {
  padding: .58rem .7rem; font-size: .94rem; border-radius: 7px;
  background: #fff; border: 1px solid var(--azul-borde); color: var(--grafito);
}
.cot-form .cot-campo select:hover,
.cot-form .cot-campo input:hover { border-color: #9FBACE; }
.cot-form .cot-ayuda { font-size: .77rem; line-height: 1.45; margin-top: .3rem; color: #6C7A84; }

/* ---------- La respuesta: verde sólido, sin vidrio ----------
   Aquí va lo que el visitante vino a leer. Antes estaba sobre
   vidrio oscuro y se leía a medias. Ahora es un bloque sólido
   con el verde de las máquinas: es la pieza de más contraste de
   toda la página, y tiene que serlo. */
.cot-panel {
  top: 82px;
  background: linear-gradient(168deg, var(--verde-panel) 0%, var(--verde-panel-2) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: #EAF5EC;
  box-shadow: 0 20px 50px rgba(12,45,22,.28), 0 2px 6px rgba(12,45,22,.12);
  overflow: hidden;
}
.cot-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--verde-senal), var(--verde-claro));
}
.cot-titulo { color: #fff; }
.cot-sub    { color: rgba(255,255,255,.80); }
.cot-valor  { color: var(--verde-claro); }
.cot-valor-pie { color: rgba(255,255,255,.68); }
.cot-bloque { border-top-color: rgba(255,255,255,.17); }
.cot-bloque h4 { color: #fff; }
.cot-lista li { color: rgba(255,255,255,.88); }
.cot-lista li::before { color: var(--verde-claro); }
.cot-dato {
  background: rgba(255,255,255,.10); border-left: 2px solid var(--verde-senal);
  border-radius: 6px;
}
.cot-dato:hover { background: rgba(255,255,255,.16); }
.cot-dato span   { color: rgba(255,255,255,.72); }
.cot-dato strong { color: #fff; }
.cot-alerta {
  background: rgba(255,255,255,.12); border-left: 3px solid var(--verde-claro);
  color: #EDF8EF; border-radius: 6px;
}

/* ---------- Los datos ---------- */
.cot-datos { margin-top: 1.3rem; padding: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--grafito); }
.cot-datos h3 { color: var(--grafito); }
.cot-datos p.intro { color: var(--azul-texto); font-size: .95rem; }
.cot-datos label > span { color: var(--grafito); }
.cot-datos input {
  background: #fff; border: 1px solid var(--azul-borde); color: var(--grafito);
  border-radius: 7px; padding: .68rem .8rem;
}
.cot-datos input:hover { border-color: #9FBACE; }
.cot-datos input::placeholder { color: #9AA8B1; }
.cot-datos .cot-ayuda { color: #7C8A93; text-align: center; margin-top: .8rem; }
.cot-error { color: #C0392B; }
.cot-listo {
  background: linear-gradient(168deg, var(--verde-panel) 0%, var(--verde-panel-2) 100%);
  color: #fff; border-radius: 10px; margin-top: 1.1rem;
}
.cot-listo a { color: var(--verde-claro); }
.cot-listo-alterna { font-size: .87rem; margin: .7rem 0 0; opacity: .88; }

/* ---------- El botón de WhatsApp ---------- */
.boton-wa { background: #25D366; color: #04241A; border-radius: 8px; }
.boton-wa:hover { background: #1EBE5B; color: #04241A; }
.boton-wa svg { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.boton-wa.boton-primario::after { content: none; }

/* ============================================================
   El chat, en claro
   ============================================================ */
.chat-panel {
  width: min(calc(100vw - 40px), 400px);
  border-radius: 16px;
  border: 1px solid var(--vidrio-borde);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 28px 68px rgba(23,49,68,.30), inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-panel { background: #fff; }
}

/* Cabecera verde: es la marca, y ancla el bloque claro */
.chat-cab {
  background: linear-gradient(168deg, var(--verde-panel) 0%, var(--verde-panel-2) 100%);
  border-bottom: 0;
  padding: .7rem .85rem;
  gap: .65rem;
  color: #fff;
}
.chat-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--verde-claro);
  border: 1px solid rgba(255,255,255,.20);
}
.chat-avatar svg { width: 24px; height: 24px; }
.chat-cab strong { font-size: 1.1rem; letter-spacing: .1em; color: #fff; }
.chat-estado {
  display: flex; align-items: center; gap: .34rem;
  font-size: .72rem; letter-spacing: .04em; color: rgba(255,255,255,.78);
  margin-top: .15rem; text-transform: none;
}
.chat-estado::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde-senal); flex: none;
}
.chat-cerrar { color: rgba(255,255,255,.75); }
.chat-cerrar:hover { color: #fff; }

/* El lienzo */
.chat-cuerpo {
  background-color: var(--wa-fondo);
  background-image: radial-gradient(circle at center, rgba(28,60,80,.045) 1.4px, transparent 1.5px);
  background-size: 24px 24px;
  padding: 1rem .85rem;
  gap: .35rem;
}

/* Las burbujas */
.chat-msj {
  position: relative;
  max-width: 82%;
  padding: .5rem .68rem .42rem;
  font-size: .93rem; line-height: 1.5;
  box-shadow: 0 1px 1.5px rgba(23,49,68,.16);
  margin-bottom: .18rem;
  color: var(--wa-texto);
}
.chat-msj.bot { background: var(--wa-entra); border: 0; border-radius: 9px 9px 9px 2px; }
.chat-msj.yo  { background: var(--wa-sale);  border-radius: 9px 9px 2px 9px; color: var(--wa-texto); }
.chat-msj strong, .chat-msj.yo strong { color: var(--verde-hondo); }
.chat-msj.bot.destacada {
  border-left: 0;
  box-shadow: 0 1px 1.5px rgba(23,49,68,.16), inset 3px 0 0 var(--verde);
}

/* La colita */
.chat-msj::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 9px; }
.chat-msj.bot::after {
  left: -7px;
  background: radial-gradient(circle at top left, transparent 9px, var(--wa-entra) 9px);
}
.chat-msj.yo::after {
  right: -7px;
  background: radial-gradient(circle at top right, transparent 9px, var(--wa-sale) 9px);
}

/* Hora y ticks */
.chat-meta {
  display: block; text-align: right;
  font-size: .655rem; letter-spacing: .02em;
  color: var(--wa-tenue); margin-top: .12rem; line-height: 1;
}
.chat-msj.yo .chat-meta { color: #5E7A66; }
.chat-tick { margin-left: .22rem; color: var(--wa-check); letter-spacing: -.34em; padding-right: .3em; }
.chat-msj p:last-of-type { margin-bottom: 0; }

/* Los tres puntitos */
.chat-escribiendo {
  background: var(--wa-entra);
  border-radius: 9px 9px 9px 2px;
  padding: .68rem .8rem; width: -moz-fit-content; width: fit-content;
  box-shadow: 0 1px 1.5px rgba(23,49,68,.16);
  gap: 5px; margin-bottom: .18rem;
}
.chat-escribiendo span {
  width: 7px; height: 7px; background: #8FA3AE;
  animation: puntos 1.25s infinite;
}

/* Respuestas rápidas */
.chat-opciones { gap: .4rem; margin-top: .25rem; }
.chat-op {
  background: #fff;
  border: 1px solid var(--verde);
  color: var(--verde-hondo);
  font-size: .86rem; padding: .42rem .8rem;
  box-shadow: 0 1px 2px rgba(23,49,68,.10);
}
.chat-op:hover { background: var(--verde); color: #fff; border-color: var(--verde); }

/* El pie */
.chat-pie {
  background: #F7FAFC;
  border-top: 1px solid var(--azul-borde);
  padding: .6rem .65rem .55rem;
}
.chat-forma { gap: .45rem; align-items: center; }
.chat-forma input {
  background: #fff;
  border: 1px solid var(--azul-borde);
  color: var(--grafito);
  border-radius: 22px; padding: .62rem .95rem;
}
.chat-forma input::placeholder { color: #98A7B0; }
.chat-forma input:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.chat-forma button {
  background: var(--verde); color: #fff;
  width: 40px; height: 40px; flex: none; padding: 0;
  border-radius: 50%; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s var(--curva), transform .18s var(--curva);
}
.chat-forma button:hover { background: var(--verde-hondo); transform: scale(1.06); }
.chat-forma button svg { width: 18px; height: 18px; fill: currentColor; }
.chat-aviso { color: #7C8A93; font-size: .68rem; margin-top: .5rem; text-align: center; }
.chat-aviso a { color: var(--verde); }

/* La burbuja flotante */
.chat-burbuja { background: var(--verde); color: #fff; border-radius: 40px; }
.chat-burbuja:hover { background: var(--verde-hondo); color: #fff; }
.chat-burbuja .punto { background: var(--verde-senal); }

@media (max-width: 520px) { .chat-panel { border-radius: 14px; } }

/* ============================================================
   PORTADA CON EL COTIZADOR DENTRO
   ============================================================ */

/* Menos negro. La foto sube a 92% y el velo baja, ademas de
   cambiar de negro a un grafito con verde: es el color de un
   taller, no el de un sotano. */
.portada-img { opacity: .92; }
.portada-velo {
  background:
    radial-gradient(102% 86% at 10% 44%, rgba(13,21,19,.80) 0%, rgba(13,21,19,.46) 40%, rgba(13,21,19,0) 76%),
    linear-gradient(100deg, rgba(16,24,25,.70) 0%, rgba(16,24,25,.46) 40%, rgba(16,24,25,.16) 70%, rgba(16,24,25,.02) 100%),
    linear-gradient(to top, rgba(14,21,20,.52) 0%, rgba(14,21,20,0) 46%);
}

/* El contenedor se ensancha para que el bloque arranque mas cerca
   del borde, pero se le deja un 10% de aire a la izquierda: pegado
   al canto se veia apretado. El contenido se queda en 980 y lo que
   sobra a la derecha es fotografia a la vista. */
.portada-cotiza .portada-cont {
  width: min(100% - 3rem, 1500px);
  max-width: none;
  padding: clamp(2rem, 4.5vw, 3.4rem) 0 clamp(2.4rem, 5vw, 3.8rem);
  padding-left: min(10%, 150px);
}
.portada-cotiza .portada-texto { max-width: min(100%, 620px); }
.portada-cotiza h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: .3em; }
.portada-cotiza .portada-bajada { font-size: clamp(1rem, 1.5vw, 1.15rem); margin-bottom: 0; }
.portada-cotiza .portada-cont::after { display: none; }

.portada-cotizador {
  max-width: min(100%, 980px);
  margin-top: clamp(1.5rem, 2.8vw, 2.2rem);
}
.portada-cotiza .cotizador-grid { grid-template-columns: 1.15fr 1fr; gap: 1.15rem; }
.portada-cotiza .cot-datos { max-width: min(100%, 980px); margin-top: 1.1rem; }
.portada-cotiza .cot-panel { position: static; top: auto; }

/* Sobre la fotografia el vidrio se cierra un poco mas: es blanco
   sobre una imagen con mucha informacion.

   OJO CON EL :not(). El panel de la respuesta tambien lleva la clase
   .vidrio en el HTML, y este selector tiene dos clases: le gana a
   `.cot-panel`, que tiene una. Sin la exclusion, el panel verde se
   pinta de blanco y su texto —que es blanco— desaparece. Paso.
   Si alguna vez agrega otro panel de fondo propio, exclúyalo aqui. */
.portada-cotiza .vidrio:not(.cot-panel) { background: rgba(255,255,255,.88); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portada-cotiza .vidrio:not(.cot-panel) { background: #fff; }
}

.portada-alterna {
  max-width: 60ch; margin: 1.2rem 0 0;
  font-size: .93rem; color: var(--acero-claro);
}
.portada-alterna a { color: var(--verde-senal); }

/* Las medias del cotizador miran el ancho de la ventana, pero aqui
   la caja vive dentro de una columna mas angosta. */
@media (max-width: 1200px) {
  .portada-cotiza .cot-campos { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .portada-cotiza .cotizador-grid { grid-template-columns: 1fr; }
  .portada-cotizador, .portada-cotiza .cot-datos { max-width: none; }
  .portada-cotiza .cot-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada-cotiza .portada-cont { padding-left: 0; }
}
@media (max-width: 560px) {
  .portada-cotiza .cot-campos { grid-template-columns: 1fr; }
  .portada-cotiza .portada-cont { padding-top: 1.6rem; }
}