/* Piel "Instagram" de Mavatec: la estética de sus historias (@mavatec_tabiques,
   la única cuenta de la marca) llevada a la web. Fondo claro con textura de hormigón,
   títulos en mayúscula anchos y gruesos, numeración en itálica fina, texto
   vertical sobre línea dorada y fotos enmarcadas. Menú y pie siguen oscuros:
   el logo tiene la palabra en blanco. Las pantallas traen estilos en línea,
   por eso varias reglas necesitan !important. */

:root {
  --hormigon: #e7e6e2;
  --hormigon-2: #dddcd7;
  --tinta: #1c1c1c;
  --tinta-2: #4a4a4a;
  --dorado: #c9a24a;
  --ambar: #f7a600;
  --ambar-texto: #8a5d00; /* el ámbar puro no se lee como texto chico sobre claro */
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Fondo y tipografía base ─────────────────────────────────────── */
body { background: var(--hormigon); }
x-dc > div {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  background-color: var(--hormigon) !important;
  background-image: radial-gradient(ellipse at 70% 0%, rgba(255,255,255,.55), transparent 60%), var(--textura) !important;
}
.mf { font-family: 'Montserrat', system-ui, sans-serif !important; }

/* Secciones alternas: un velo blanco en vez de un gris plano. */
x-dc section[style*="background: #f2f2f2"] { background: rgba(255,255,255,.42) !important; }

/* Títulos: de Oswald condensada a Montserrat ancha y gruesa, como las historias. */
x-dc [style*="font-family: Oswald"] {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
x-dc h1[style*="Oswald"] { font-size: clamp(32px, 4.4vw, 58px) !important; line-height: 1.04 !important; }
x-dc h2[style*="Oswald"] { font-size: clamp(24px, 2.9vw, 36px) !important; line-height: 1.12 !important; }
x-dc h3[style*="Oswald"] { font-size: clamp(18px, 1.7vw, 22px) !important; line-height: 1.2 !important; }

/* Numeración de pasos: itálica fina, como "01 / Diseño". */
x-dc ol li > span[style*="Oswald"],
x-dc ol li > div[style*="Oswald"] {
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 30px !important;
  color: var(--tinta) !important;
}
x-dc ol li > span[style*="Oswald"]::after,
x-dc ol li > div[style*="Oswald"]::after { content: ' /'; }

/* Etiquetas ámbar sobre fondo claro: tono más oscuro para que se lean. */
/* Solo las etiquetas sobre fondo claro: las que van sobre fotos o sobre
   el sello negro de EJEMPLO quedan en ámbar puro. */
x-dc [style*="text-transform: uppercase; color: #f7a600"],
#productos [style*="color: #f7a600"] { color: var(--ambar-texto) !important; }

/* Tarjetas blancas: marco fino, como la foto de la historia. */
x-dc [style*="border: 1px solid #d4d4d4"] { border-color: rgba(0,0,0,.12) !important; background-color: #fff; }

/* ── Cabecera clara (reemplaza los heros oscuros) ────────────────── */
.hero-claro { position: relative; overflow: hidden; padding: 64px 0 72px; color: var(--tinta); }
.hero-claro::before {
  /* La "m" de marca de agua de las historias. */
  content: 'm';
  position: absolute; left: -30px; bottom: -170px;
  font: 800 560px/1 'Montserrat', sans-serif;
  color: rgba(0,0,0,.035);
  pointer-events: none;
}
.hero-claro__in {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.hero-claro--solo .hero-claro__in { grid-template-columns: minmax(0, 1fr); }
.hero-claro__txt { display: flex; flex-direction: column; gap: 22px; }
.hero-claro .migas { font-size: 14px; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 8px; }
.hero-claro .migas a { color: var(--tinta-2); }
.t-display {
  margin: 0; font: 800 clamp(34px, 4.6vw, 62px)/1.02 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: -0.015em; color: var(--tinta);
}
.t-sub {
  margin: 0; max-width: 560px;
  font: 400 clamp(16px, 1.5vw, 20px)/1.4 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: .01em; color: var(--tinta);
}
.t-num { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.t-num li { font: italic 300 19px/1.4 'Montserrat', sans-serif; color: var(--tinta-2); }
.t-num li span { display: inline-block; min-width: 46px; }
.t-eyebrow { font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ambar-texto); }
.hero-claro__acciones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; box-sizing: border-box; font: 600 15px 'Montserrat', sans-serif; text-decoration: none; }
.btn-ambar { background: var(--ambar); color: var(--tinta); }
.btn-ambar:hover { background: #e59a00; }
.btn-linea { border: 1px solid var(--tinta); color: var(--tinta); }
.btn-linea:hover { background: var(--tinta); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { border: 1px solid rgba(0,0,0,.25); background: rgba(255,255,255,.6); color: var(--tinta); text-decoration: none; font: 500 14px 'IBM Plex Mono', monospace; padding: 10px 16px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.chips a:hover { border-color: var(--tinta); }

.hero-claro__foto { position: relative; margin: 10px; outline: 1px solid rgba(0,0,0,.14); outline-offset: 10px; background: #000; }
/* Cuadrada a propósito: las fotos del sitio viejo traen una cuña blanca
   a la izquierda y el recorte desde la derecha la deja afuera. */
.hero-claro__foto img { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 560px; object-fit: cover; object-position: right center; }
.hero-claro__foto--ancha img { aspect-ratio: 16 / 9; }
.hero-claro__foto figcaption, .hero-video {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.94); color: var(--tinta); border: none; cursor: pointer;
  font: 600 14px 'Montserrat', sans-serif; padding: 6px 14px 6px 6px; min-height: 44px;
}
.hero-video__play { width: 32px; height: 32px; background: var(--ambar); display: inline-flex; align-items: center; justify-content: center; }
.hero-video__nota { font: 400 11px 'IBM Plex Mono', monospace; color: var(--tinta-2); }
.etiqueta-ejemplo { position: absolute; top: 14px; left: 14px; background: var(--tinta); color: var(--ambar); font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; padding: 6px 10px; }

/* Datos debajo de la cabecera del inicio. */
.cifras { position: relative; max-width: 1240px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; border-top: 1px solid rgba(0,0,0,.14); padding-top: 22px; }
.cifras b { display: block; font: 800 28px 'Montserrat', sans-serif; color: var(--tinta); }
.cifras span { font-size: 14px; color: var(--tinta-2); }
.cotiza-rapida { position: relative; max-width: 1240px; margin: 40px auto 0; }

/* Bandas que eran oscuras y pasan a claras. */
.banda-clara { color: var(--tinta) !important; background: rgba(255,255,255,.42) !important; }
.banda-clara p { color: var(--tinta-2) !important; }
.banda-clara button[style*="#262626"] { background: #fff !important; color: var(--tinta) !important; border-color: rgba(0,0,0,.14) !important; }
.banda-clara button[style*="#262626"] span[style*="#b8b8b8"] { color: var(--tinta-2) !important; }

/* Tarjetas de producto del inicio: foto enmarcada y texto debajo, sin degradé. */
#productos a[style*="aspect-ratio: 3 / 4"] {
  aspect-ratio: auto !important; display: flex !important; flex-direction: column;
  background: #fff !important; color: var(--tinta) !important; outline: 1px solid rgba(0,0,0,.12);
}
#productos a[style*="aspect-ratio: 3 / 4"] > img { position: static !important; aspect-ratio: 4 / 5; height: auto !important; }
#productos a[style*="aspect-ratio: 3 / 4"] > div[aria-hidden] { display: none !important; }
#productos a[style*="aspect-ratio: 3 / 4"] > div:last-child { position: static !important; padding: 20px 22px 24px !important; }
#productos a[style*="aspect-ratio: 3 / 4"] > div:last-child > div:last-child { color: var(--tinta-2) !important; }

@media (max-width: 899.98px) {
  .hero-claro { padding: 40px 0 56px; }
  .hero-claro__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-claro::before { font-size: 360px; bottom: -110px; }
}

/* El punto ámbar del final, como "ESPACIOS QUE CONECTAN." en las historias. */
.punto { color: var(--ambar); }
/* La bajada en itálica: "Diseñadas a medida de cada proyecto." */
.t-italica { margin: -10px 0 0; font: italic 400 clamp(16px, 1.4vw, 19px)/1.4 'Montserrat', sans-serif; color: var(--tinta-2); }

/* ── Índice vertical por sección ──────────────────────────────────────
   "02 / clientes" en vertical, leído de abajo hacia arriba, con la línea
   dorada a todo lo alto de la sección: cada sección arranca su propia
   línea, y eso también marca el corte. Solo donde hay margen para él. */
.con-riel { position: relative; }
.riel {
  position: absolute; left: 26px; top: 40px; bottom: 40px; z-index: 1;
  display: flex; justify-content: flex-end;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 13px/1 'Montserrat', sans-serif; letter-spacing: .06em; color: var(--tinta-2);
  pointer-events: none;
}
.riel b { font-weight: 600; color: var(--tinta); }
.riel::after { content: ''; position: absolute; top: 0; bottom: 0; left: -12px; border-left: 1px solid var(--dorado); }
section[style*="background: #f7a600"] .riel::after { border-color: rgba(0,0,0,.35); }

/* ── Cortes entre secciones ───────────────────────────────────────── */
x-dc > div > section + section { border-top: 1px solid rgba(0,0,0,.12); }
.tono-b:not([style*="background"]):not(.banda-clara) { background-color: rgba(0,0,0,.035); }
.tono-b.banda-clara { background: rgba(0,0,0,.035) !important; }


@media (max-width: 1099.98px) {
  .riel { display: none; }
}
/* Pestaña ámbar en el arranque de cada sección, alineada con el índice:
   el corte se lee de un vistazo aunque los tonos sean parecidos. */
x-dc > div > section + section.con-riel::before {
  content: ''; position: absolute; top: -2px; left: 0; width: 64px; height: 4px; background: var(--ambar);
}

/* El campo de archivo no se achica solo y ensanchaba la página en el celular. */
x-dc input[type="file"] { max-width: 100%; min-width: 0; box-sizing: border-box; }

/* ══ Revisión UX/UI (20/10) ═══════════════════════════════════════════ */

/* Menú: la página actual se marca con la línea ámbar. */
x-dc header nav a[aria-current] { color: #fff !important; font-weight: 600 !important; border-bottom-color: var(--ambar) !important; }
x-dc header nav a:hover { color: #fff !important; }

/* Títulos de sección de las páginas nuevas. */
.t-h2 { margin: 0; font: 800 clamp(24px, 2.9vw, 36px)/1.12 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; color: var(--tinta); }

/* Galería simple: cuadrados con la foto recortada desde la derecha (las fotos
   viejas traen una cuña blanca a la izquierda). */
.galeria-simple { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.galeria-simple figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #ddd; outline: 1px solid rgba(0,0,0,.1); }
.galeria-simple img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }

/* Modelos (duchadores). */
.modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.modelo { background: #fff; outline: 1px solid rgba(0,0,0,.12); display: flex; flex-direction: column; scroll-margin-top: 120px; }
.modelo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: right center; display: block; }
.modelo__txt { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.modelo h3 { margin: 0; font: 800 26px 'Montserrat', sans-serif; }
.modelo ul { margin: 0; padding-left: 18px; color: var(--tinta-2); display: grid; gap: 6px; flex-grow: 1; }
.modelo .btn { align-self: flex-start; margin-top: 8px; }

/* Ficha técnica en lista (tabiques de oficina). */
.ficha { margin: 0; background: #fff; outline: 1px solid rgba(0,0,0,.12); }
.ficha > div { display: grid; grid-template-columns: 180px 1fr; gap: 6px 24px; padding: 16px 22px; border-bottom: 1px solid rgba(0,0,0,.08); }
.ficha > div:last-child { border-bottom: none; }
.ficha dt { font: 500 12.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); padding-top: 3px; }
.ficha dd { margin: 0; }

/* Cotización rápida de la home: ahora es un formulario que lleva lo cargado a Cotizar. */
.cotiza-rapida { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; background: #fff; padding: 20px; outline: 1px solid rgba(0,0,0,.12); }
.cotiza-rapida .campo { flex: 1 1 220px; }
.cotiza-rapida .btn { border: none; cursor: pointer; }
.cotiza-rapida__nota { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--tinta-2); }

/* Campos de formulario. */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-weight: 600; font-size: 15px; }
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  font: inherit; border: 1px solid #8a8a8a; background: #fff; padding: 11px 12px; min-height: 48px; box-sizing: border-box; width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--ambar); outline-offset: 1px; }
.campo__ayuda { font-size: 14px; color: var(--tinta-2); }
.campo--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.campo--check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.campo--check label { font-weight: 400; font-size: 14px; color: var(--tinta-2); }

/* Página de Cotizar. */
.hero-claro__in.cotizar { align-items: start; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.contacto-alt { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(0,0,0,.14); padding-top: 18px; }
.contacto-alt a { color: var(--tinta); padding: 8px 0; }
.form-caja { background: #fff; outline: 1px solid rgba(0,0,0,.12); padding: 32px; position: relative; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.form-origen { margin: 0; padding: 10px 14px; background: #fff6df; border-left: 3px solid var(--ambar); font-size: 15px; }
.form-error { background: #fdecea; border: 1px solid #b3261e; color: #7a1b14; padding: 14px 18px; font-size: 15px; }
.form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-top: 1px solid rgba(0,0,0,.1); padding-top: 20px; }
.form-pie .btn { border: none; cursor: pointer; }
.form-pie span { font-size: 14px; color: var(--tinta-2); }
.form-ok { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 16px 0; }
.form-ok__icono { width: 56px; height: 56px; background: var(--ambar); display: flex; align-items: center; justify-content: center; }
.form-ok .btn { background: none; cursor: pointer; }

/* Tarjetas de producto de la home: 4:3, para que el nombre se vea sin bajar. */
#productos a[style*="aspect-ratio: 3 / 4"] > img { aspect-ratio: 4 / 3 !important; }

/* Tipos de obra: cinco en una fila en escritorio, sin huérfanos. */
@media (min-width: 1100px) {
  x-dc section [style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"]:has(> a > img) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Barra fija "Cotizar MT45": solo en el celular, a la izquierda del WhatsApp. */
.barra-cotizar { display: none; }

@media (max-width: 767.98px) {
  /* Cabeceras: foto más baja para que la llamada a la acción quede cerca. */
  .hero-claro__foto img { aspect-ratio: 4 / 3; max-height: 300px; }
  .hero-claro__in.cotizar { grid-template-columns: minmax(0, 1fr); }
  .form-caja { padding: 20px; }
  .ficha > div { grid-template-columns: 1fr; }

  /* Ficha: primero el título y el botón, después la galería. */
  .ficha-info { order: -1; }
  .barra-cotizar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 16px; right: 96px; bottom: 20px; z-index: 55;
    height: 56px; background: var(--ambar); color: var(--tinta); text-decoration: none;
    font: 700 16px 'Montserrat', sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  }

  /* Tipos de obra: dos columnas. */
  x-dc section [style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"]:has(> a > img) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Texto mínimo de 13 px en etiquetas. */
  x-dc [style*="font-size: 11px"], x-dc [style*="font-size: 12px"], .t-eyebrow { font-size: 13px !important; }

  /* Toques de 44 px: pie, migas y datos de contacto. */
  .mf-col a, .mf-inline a { display: inline-block; padding-top: 11px !important; padding-bottom: 11px !important; }
  .mf-col li { margin-bottom: 0; }
  .mf-dato { min-height: 44px; }
  .migas a { display: inline-block; padding: 11px 0; }
}
@media (max-width: 767.98px) {
  /* Tipos de obra en dos columnas: los nombres largos ("Entretenimiento") entran. */
  x-dc section [style*="minmax(220px, 1fr)"] > a span[style*="Oswald"] { font-size: 14px !important; min-width: 0; overflow-wrap: anywhere; }
  x-dc section [style*="minmax(220px, 1fr)"] > a > div { padding: 12px !important; gap: 6px !important; }
}

/* SEO on-page: el H1 lleva la búsqueda ("Tabiques sanitarios para baños") y el
   eslogan grande pasa a ser un párrafo con el mismo estilo. Se ve igual. */
.t-h1 { margin: 0; font: 600 15px/1.35 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar-texto); }
.h1-modelo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.h1-modelo__tipo { font: 500 13px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.h1-modelo__nombre { font: 800 clamp(48px, 6vw, 72px)/1 'Montserrat', sans-serif; color: var(--tinta); }

/* Una frase por renglón en los títulos de dos frases ("Cada espacio." /
   "Una solución."), en cualquier ancho: así nunca corta a mitad de frase. */
.t-display .linea { display: block; }

/* ── Grilla común ──────────────────────────────────────────────────────
   Menú, cabecera, secciones y pie arrancan en la misma línea: un solo ancho
   máximo (1240 px) y un solo margen lateral. En escritorio el margen deja
   lugar al índice vertical; en tablet y celular se achica. */
:root { --margen: 20px; }
@media (min-width: 768px) { :root { --margen: 32px; } }
@media (min-width: 1100px) { :root { --margen: 88px; } }
x-dc > div > header > div,
x-dc > div > section > :not(.riel),
.mf-in {
  width: min(1240px, calc(100% - 2 * var(--margen))) !important;
  max-width: none !important; /* ningún bloque con ancho propio: corría el contenido */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
x-dc > div > section { padding-left: 0 !important; padding-right: 0 !important; }

/* La cotización rápida es una caja: la grilla alinea su borde, pero adentro
   necesita su relleno (la regla común se lo había sacado). */
x-dc > div > section > form.cotiza-rapida { padding: 24px 28px !important; }
@media (max-width: 767.98px) { x-dc > div > section > form.cotiza-rapida { padding: 18px 16px !important; } }

/* ── Tipos de obra: foto a sangre con el nombre encima ─────────────────
   Antes eran foto + caja blanca, con títulos grandes que partían en dos
   renglones y la flecha pegada al texto. Ahora todas miden lo mismo. */
.tipo { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #222; color: #fff; text-decoration: none; outline: 1px solid rgba(0,0,0,.12); }
.tipo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.tipo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 45%, rgba(20,20,20,.88) 100%); }
.tipo__pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px; }
.tipo__nombre { font: 700 15px/1.25 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.tipo__flecha { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--ambar); color: var(--tinta); font-size: 18px; transition: transform .2s ease; }
.tipo:hover img { transform: scale(1.04); }
.tipo:hover .tipo__flecha, .tipo:focus-visible .tipo__flecha { transform: translateX(3px); }
.tipo:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
@media (max-width: 767.98px) {
  .tipo { aspect-ratio: 4 / 5; }
  .tipo__pie { padding: 14px; }
  .tipo__nombre { font-size: 13px; }
  .tipo__flecha { width: 32px; height: 32px; }
  /* Cinco en dos columnas: la última va ancha para no quedar sola. */
  .tipo:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .tipo img, .tipo__flecha { transition: none; } }
/* La flecha va arriba a la derecha: el nombre ("Entretenimiento") usa todo el
   ancho de abajo y nunca choca con ella, en ningún tamaño. */
.tipo__flecha { position: absolute; top: 14px; right: 14px; z-index: 1; }
.tipo__nombre { flex: 1 1 auto; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .tipo__nombre { font-size: 12.5px; letter-spacing: .02em; } }

/* Contacto simple (Proyectos): tres accesos directos, sin otro formulario. */
.contacto-rapido { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.contacto-rapido__item { display: flex; align-items: center; gap: 16px; background: #fff; outline: 1px solid rgba(0,0,0,.12); padding: 22px; color: var(--tinta); text-decoration: none; min-height: 88px; box-sizing: border-box; transition: outline-color .15s ease, transform .15s ease; }
.contacto-rapido__item > svg { flex: none; color: var(--tinta); }
.contacto-rapido__item > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contacto-rapido__item b { font: 700 16px 'Montserrat', sans-serif; }
.contacto-rapido__item span span { font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.contacto-rapido__item:hover { outline: 2px solid var(--ambar); transform: translateY(-2px); }
.contacto-rapido__item--wa > svg { color: #1da851; }
@media (prefers-reduced-motion: reduce) { .contacto-rapido__item { transition: none; } }

/* Preguntas frecuentes: acordeón nativo (<details>). La respuesta está en el
   HTML aunque esté cerrada. Una sola columna de lectura cómoda. */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--linea, #d4d4d4); max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--linea, #d4d4d4); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; min-height: 44px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font: 700 clamp(16px, 1.5vw, 19px)/1.35 'Montserrat', sans-serif; color: var(--tinta); }
.faq__item summary::after { content: '+'; flex: none; width: 32px; height: 32px; display: grid; place-items: center; font: 400 26px/1 'Montserrat', sans-serif; color: var(--tinta); border: 1px solid var(--tinta); transition: transform .2s; }
.faq__item[open] summary::after { content: '−'; background: var(--ambar); border-color: var(--ambar); }
.faq__item summary:hover h3 { color: #8a5d00; }
.faq__item summary:focus-visible { outline: 2px solid var(--ambar); outline-offset: 4px; }
.faq__item p { margin: 0 0 22px; max-width: 70ch; font-size: 16px; line-height: 1.6; color: var(--tinta-2); }

/* Texto solo para lectores de pantalla. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Comparativa MT45 vs MTUP: tabla real (la leen buscadores y asistentes de
   IA). Lo compartido ocupa las dos columnas; la diferencia va resaltada. */
.comparativa { overflow-x: auto; border: 1px solid #d4d4d4; background: #fff; }
.comparativa table { width: 100%; min-width: 560px; table-layout: fixed; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.comparativa caption { caption-side: bottom; text-align: left; padding: 12px 18px; font-size: 13px; color: var(--tinta-2); border-top: 1px solid #e3e3e3; }
.comparativa thead th { background: var(--tinta); color: #fff; text-align: left; padding: 14px 18px; font: 800 18px 'Montserrat', sans-serif; letter-spacing: .02em; }
.comparativa thead th:first-child { width: 26%; }
.comparativa thead th:not(:first-child) { width: 37%; text-align: center; }
.comparativa__diferencia td { text-align: center; }
.comparativa tbody th { text-align: left; vertical-align: top; padding: 14px 18px; font: 500 12.5px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.comparativa tbody td { padding: 14px 18px; vertical-align: top; color: var(--tinta); }
.comparativa tbody tr + tr { border-top: 1px solid #e3e3e3; }
.comparativa td[colspan] { text-align: center; }
.comparativa__medida { font-family: 'IBM Plex Mono', monospace; }
.comparativa__diferencia { background: #fff6dc; box-shadow: inset 4px 0 0 var(--ambar); }
.comparativa__diferencia th { color: var(--tinta) !important; font-weight: 600 !important; }
.comparativa__nota { margin: 0; font-size: 13px; color: var(--tinta-2); }
.enlace-flecha { align-self: flex-start; font-weight: 600; color: var(--tinta); text-decoration: none; border-bottom: 2px solid var(--ambar); padding: 10px 0 2px; }
.enlace-flecha:hover { color: #8a5d00; }

/* En el celular la tabla pasa a tarjetas: sin scroll de costado. */
@media (max-width: 599.98px) {
  .comparativa { overflow: visible; border: none; background: none; }
  .comparativa table, .comparativa tbody, .comparativa tr, .comparativa th, .comparativa td { display: block; min-width: 0; width: auto !important; }
  .comparativa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .comparativa caption { display: block; border: none; padding: 10px 0 0; }
  .comparativa tbody tr { background: #fff; border: 1px solid #d4d4d4 !important; margin-bottom: 10px; padding: 14px 16px; }
  .comparativa tbody th { padding: 0 0 8px; }
  .comparativa tbody td { padding: 4px 0; text-align: left !important; }
  .comparativa td[colspan]::before { content: 'MT45 y MTUP · '; font-weight: 700; }
  .comparativa__diferencia td:nth-of-type(1)::before { content: 'MT45 · '; font-weight: 700; }
  .comparativa__diferencia td:nth-of-type(2)::before { content: 'MTUP · '; font-weight: 700; }
}

/* Firma "Powered by DieciseisOnce" en el celular. Con solo el botón de
   WhatsApp (abajo a la derecha), la firma se corre a la izquierda de su
   lugar y no hace falta espacio extra. Con la barra de Cotizar, que ocupa
   todo el ancho, la firma deja lugar debajo para verse entera por encima. */
@media (max-width: 767.98px) {
  .mf-agencia { justify-content: flex-start !important; padding: 18px 96px 18px 24px !important; min-height: 76px; box-sizing: border-box; }
  body:has(.barra-cotizar) .mf-agencia { justify-content: center !important; padding: 18px 24px 96px !important; }
}

/* Validación de Cotizar: mensaje debajo de cada campo y resumen arriba. */
.campo__error { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; font-weight: 600; color: #b3261e; }
.campo__error::before { content: '!'; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #b3261e; color: #fff; font-size: 12px; line-height: 18px; text-align: center; margin-top: 1px; }
.campo--error input:not([type="checkbox"]), .campo--error textarea { border-color: #b3261e !important; box-shadow: inset 0 0 0 1px #b3261e; }
.campo--check { flex-wrap: wrap; }
.campo--check .campo__error { flex-basis: 100%; padding-left: 34px; }
.campo--check.campo--error input { outline: 2px solid #b3261e; outline-offset: 2px; }
.form-resumen { background: #fdecea; border: 1px solid #b3261e; color: #7a1b14; padding: 12px 16px; font-size: 15px; font-weight: 600; }

/* Foco del teclado: contorno ámbar grueso en todo el sitio (solo con
   teclado; con el mouse o el dedo no aparece). */
:where(a, button, summary, select, input, textarea):focus-visible { outline: 3px solid var(--ambar) !important; outline-offset: 2px; }

/* Textos legales (política de privacidad). */
.texto-legal h2 { margin: 0 0 10px; font-size: clamp(20px, 2vw, 24px) !important; }
.texto-legal p { margin: 0 0 12px; }
.texto-legal a { color: var(--tinta); text-decoration-color: var(--ambar); text-decoration-thickness: 2px; }

/* 404: enlaces a los productos con el estilo del sitio. */
.t-num a { color: inherit; text-decoration: none; border-bottom: 2px solid #f7a600; }
.t-num a:hover { color: #f7a600; }

/* Lo que los scripts ocultan (filtros, estados del formulario) queda oculto
   aunque el elemento tenga display escrito en su style. */
[hidden] { display: none !important; }

/* Cotizar sin formulario conectado: contacto directo en la caja del form. */
.cotizar-directo { display: flex; flex-direction: column; gap: 18px; }