/* ══════════════════════════════════════════════════════════════════════════
   REMUSA · Equipos de trasiego de combustible
   Diseño calcado de las FICHAS TÉCNICAS oficiales: burdeos #700C20 sobre
   blanco, banda de encabezado vino oscuro con el logo y el tagline, cajas
   blancas de borde fino y la barra de contacto del pie. Los colores salen
   muestreados del PDF, no a ojo.

   Tipografía: las fichas usan Montserrat (cuerpo) y Tw Cen MT Condensed Extra
   Bold (títulos). No se auto-hospedan: Tw Cen MT es de Monotype y no se puede
   redistribuir. La pila las usa si el visitante las tiene y si no cae en
   geométricas equivalentes (Avenir Next, Century Gothic) — el parecido se
   sostiene igual porque el color y las formas hacen el trabajo pesado.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --vino:      #700C20;   /* títulos, código, viñetas — muestreado de la ficha */
  --vino-osc:  #4B060F;   /* banda del encabezado */
  --vino-noc:  #33040B;   /* extremo oscuro del degradado */
  --pie:       #3A1010;   /* barra de contacto del pie */
  --tinta:     #25171F;   /* texto de cuerpo de la ficha */
  --carbon:    #403F41;   /* gris del encabezado, lado derecho */
  --rojo:      #C1121F;   /* acento vivo */
  --wa:        #25D366;
  --wa-osc:    #1DA851;
  --blanco:    #FFFFFF;
  --hueso:     #F4F1F2;
  --gris:      #7C7079;
  --gris-cl:   #D8D2D5;
  --borde:     #DCD5D7;
  --radio:     10px;
  --radio-sm:  7px;
  --sombra:    0 6px 20px rgba(37,23,31,.10);
  --sombra-lg: 0 20px 50px rgba(0,0,0,.30);
  --ancho:     1180px;

  --tipo: "Montserrat", "Avenir Next", "Century Gothic", "Segoe UI", Roboto,
          -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --tipo-titulo: "Tw Cen MT Condensed Extra Bold", "Tw Cen MT Condensed",
          "Avenir Next Condensed", "Franklin Gothic Demi Cond", "Arial Narrow",
          var(--tipo);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--tipo);
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
a { color: var(--vino); }

/* Los títulos son la firma de la ficha: condensados, muy pesados, en versales */
h1, h2, h3, .titular {
  font-family: var(--tipo-titulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.08;
  margin: 0 0 .45em;
  color: var(--vino);
}

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

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--tipo); font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  padding: .78em 1.5em; border: 2px solid transparent; border-radius: var(--radio-sm);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #FFC94D; outline-offset: 3px; }
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.btn--lg { padding: .92em 1.85em; font-size: 1rem; }
.btn--sm { padding: .52em 1rem; font-size: .86rem; }
.btn--bloque { width: 100%; }

.btn--wa { background: var(--wa); color: #06301A; }
.btn--wa:hover { background: var(--wa-osc); color: #fff; }
.btn--vino { background: var(--vino); color: #fff; }
.btn--vino:hover { background: var(--vino-osc); }
.btn--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--fantasma:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── Barra superior — la banda del encabezado de la ficha ─────────────── */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(100deg, var(--vino-osc) 0 46%, var(--vino-noc) 60%, var(--carbon) 100%);
  border-bottom: 3px solid var(--vino);
}
.barra__int { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; }
.barra__marca { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.barra__logo { display: flex; flex-direction: column; gap: .1rem; }
.barra__logo img { width: 132px; height: auto; }
/* El "¡Somos mucho más!" de la ficha: "mucho" va más grande */
.barra__tagline {
  font-family: var(--tipo-titulo); font-weight: 800; color: #fff;
  font-size: .82rem; letter-spacing: .02em; line-height: 1; padding-left: 2px;
}
.barra__tagline em { font-style: normal; font-size: 1.16em; }
.barra__division {
  font-family: var(--tipo-titulo); color: #fff; font-size: 1.05rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding-left: 1rem; border-left: 2px solid rgba(255,255,255,.45);
}
.barra__acciones { display: flex; align-items: center; gap: .55rem; }
.barra__tel {
  display: inline-flex; align-items: center; gap: .45em;
  color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem;
  padding: .48em .75em; border-radius: var(--radio-sm);
}
.barra__tel:hover { background: rgba(255,255,255,.12); }
.barra__tel svg { width: 1.05em; height: 1.05em; fill: #fff; }

@media (max-width: 860px) { .barra__division { display: none; } }
@media (max-width: 620px) {
  .barra__tagline { display: none; }
  .barra__tel span { display: none; }
  .barra__logo img { width: 108px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(100deg, var(--vino-noc) 0 44%, var(--vino-osc) 44% 64%, #5C0813 100%);
}
.hero::after {   /* las franjas tenues de las artes de la campaña */
  content: ""; position: absolute; inset: 0 0 0 44%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.hero__int {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 3rem; align-items: center;
  padding: 3.6rem 0 3.4rem;
}
.hero__kicker {
  font-family: var(--tipo); color: #F2B8BE; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .17em; margin-bottom: .9rem;
}
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); color: #fff; margin-bottom: .38em; }
.hero h1 em { font-style: normal; color: #FF8A94; display: block; }
.hero__bajada { font-family: var(--tipo); font-size: 1.02rem; color: #EFE2E4; max-width: 33em; font-weight: 500; }
.hero__bullets { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .48rem; }
.hero__bullets li { position: relative; padding-left: 1.6rem; color: #fff; font-size: .97rem; font-weight: 500; }
.hero__bullets li::before {
  content: "•"; position: absolute; left: .25rem; top: -.1em;
  color: #FF8A94; font-size: 1.35em; font-weight: 800;
}
.hero__bullets strong { font-weight: 800; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__nota { margin-top: 1rem; font-size: .84rem; color: #D6BFC3; }

.hero__figura { margin: 0; text-align: center; }
.hero__figura img {
  width: 100%; max-width: 400px; margin-inline: auto;
  background: #fff; border-radius: var(--radio);
  padding: 1.2rem; box-shadow: var(--sombra-lg);
}
.hero__figura figcaption {
  font-family: var(--tipo-titulo); margin-top: .85rem; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .05em; color: #F2B8BE;
}

@media (max-width: 900px) {
  .hero { background: linear-gradient(160deg, var(--vino-noc) 0 52%, #5C0813 100%); }
  .hero::after { inset: 0; opacity: .55; }
  .hero__int { grid-template-columns: 1fr; gap: 2rem; padding: 2.4rem 0 2.8rem; }
  .hero__figura { order: -1; }
  .hero__figura img { max-width: 250px; padding: .9rem; }
  .hero__figura figcaption { display: none; }
}

/* ── Franja de confianza ──────────────────────────────────────────────── */
.confianza { background: var(--hueso); border-bottom: 1px solid var(--borde); }
.confianza__int { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding: 1.3rem 0; }
.confianza__item { display: flex; flex-direction: column; gap: .1rem; padding-left: .85rem; border-left: 3px solid var(--vino); }
.confianza__item strong { font-size: .93rem; color: var(--vino); }
.confianza__item span { font-size: .82rem; color: var(--gris); }
@media (max-width: 760px) { .confianza__int { grid-template-columns: 1fr 1fr; gap: .9rem; } }
@media (max-width: 420px) { .confianza__int { grid-template-columns: 1fr; } }

/* ── Secciones ────────────────────────────────────────────────────────── */
.seccion__cabecera { max-width: 46em; margin: 0 auto 2rem; text-align: center; }
.seccion__cabecera h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.seccion__cabecera p { color: var(--gris); margin: 0; font-weight: 500; }
.seccion__cabecera--clara h2 { color: #fff; }
.seccion__cabecera--clara p { color: var(--gris-cl); }

.productos { padding: 3.4rem 0 4rem; background: var(--blanco); }

/* ── Filtros ──────────────────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.filtro {
  font-family: var(--tipo); font-weight: 700; font-size: .87rem;
  padding: .52em 1.15em; border-radius: 100px; cursor: pointer;
  background: #fff; color: var(--vino); border: 1.5px solid var(--borde);
  transition: all .14s ease;
}
.filtro:hover { border-color: var(--vino); }
.filtro.is-activo { background: var(--vino); border-color: var(--vino); color: #fff; }
.filtro:focus-visible { outline: 3px solid #FFC94D; outline-offset: 2px; }

/* ── Tarjetas: la caja blanca de la ficha ─────────────────────────────── */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.cargando { grid-column: 1/-1; text-align: center; color: var(--gris); padding: 2rem 0; }

.tarjeta {
  display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--tinta); border-radius: 14px;
  overflow: hidden; transition: box-shadow .16s ease, transform .16s ease;
}
.tarjeta:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.tarjeta__foto {
  position: relative; height: 215px; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.tarjeta__foto img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.tarjeta__foto--vacia {
  background: repeating-linear-gradient(45deg, #FAF7F8 0 12px, #F2ECEE 12px 24px);
  color: var(--gris); font-size: .8rem; text-align: center; padding: 1.5rem;
}
.tarjeta__cat {
  position: absolute; top: .7rem; left: .7rem;
  font-family: var(--tipo); background: var(--vino); color: #fff;
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; padding: .32em .7em; border-radius: 4px;
}
.tarjeta__cuerpo { padding: 0 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
/* Cintillo del título, igual que la caja de encabezado de la ficha */
.tarjeta__titular { border-top: 1.5px solid var(--tinta); padding-top: .9rem; margin-bottom: .7rem; }
.tarjeta__nombre { font-size: 1.28rem; margin: 0 0 .12em; }
.tarjeta__sub { font-size: .84rem; color: var(--gris); margin: 0 0 .5rem; font-weight: 600; }
.tarjeta__codigo {
  display: inline-block; font-family: var(--tipo); font-size: .86rem; font-weight: 700;
  color: var(--vino); letter-spacing: .02em;
}
.tarjeta__resumen { font-size: .87rem; color: var(--tinta); font-weight: 500; margin-bottom: .9rem; }
.tarjeta__rotulo {
  font-family: var(--tipo-titulo); font-size: 1rem; color: var(--vino);
  text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .4rem;
}
.tarjeta__specs { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .26rem; font-size: .84rem; }
.tarjeta__specs li { display: flex; gap: .6rem; }
.tarjeta__specs .k { color: var(--gris); flex: none; min-width: 7.2em; font-weight: 600; }
.tarjeta__specs .v { color: var(--tinta); font-weight: 700; }
.tarjeta__equipado { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .22rem; font-size: .83rem; }
.tarjeta__equipado li { position: relative; padding-left: .95rem; font-weight: 600; }
.tarjeta__equipado li::before { content: "•"; position: absolute; left: 0; color: var(--vino); font-weight: 800; }
/* Lo que pasa de 5 características, más el "equipado con", se pliega: si no,
   una tarjeta de 9 datos estira toda su fila. */
.tarjeta .es-extra { display: none; }
.tarjeta.es-abierta .es-extra { display: revert; }
.tarjeta.es-abierta li.es-extra { display: flex; }
.tarjeta__mas {
  background: none; border: 0; padding: 0; margin: -.5rem 0 1rem;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--vino);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start;
}
.tarjeta__pie { margin-top: auto; }

/* ── Sello MECLUBE / marca italiana ───────────────────────────────────── */
.sello { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; padding: 2.4rem 0 0; }
.sello img.sello__meclube { width: 74px; }
.sello__texto { text-align: left; }
.sello__texto strong { display: block; font-family: var(--tipo); font-size: .95rem; font-weight: 700; color: var(--tinta); }
.sello__texto span { font-size: .84rem; color: var(--gris); }
.sello__bandera { width: 34px; border: 1px solid var(--borde); }

/* ── Ficha técnica ────────────────────────────────────────────────────── */
.ficha { background: var(--hueso); padding: 3.4rem 0; border-block: 1px solid var(--borde); }
.ficha__int { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.ficha__texto h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.ficha__texto p { color: var(--tinta); max-width: 34em; font-weight: 500; }

.ficha__hojas { position: relative; height: 250px; }
.hoja {
  position: absolute; left: 50%; top: 0; width: 178px; height: 232px;
  background: #fff; border: 1px solid var(--borde); border-radius: 6px; box-shadow: var(--sombra);
}
.hoja--3 { transform: translateX(-50%) rotate(-8deg) translateX(-32px); background: #EDE7E9; }
.hoja--2 { transform: translateX(-50%) rotate(5deg) translateX(22px); background: #F6F1F2; }
.hoja--1 {
  transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem; text-align: center; padding: 1rem;
  border-top: 7px solid var(--vino);
}
.hoja--1 span { font-family: var(--tipo-titulo); font-size: 1rem; color: var(--vino); text-transform: uppercase; }
@media (max-width: 860px) {
  .ficha__int { grid-template-columns: 1fr; gap: 1.8rem; }
  .ficha__hojas { display: none; }
}

/* ── Por qué REMUSA ───────────────────────────────────────────────────── */
.porque { background: var(--vino-noc); color: #fff; padding: 3.4rem 0; }
.porque__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.porque__rejilla article { background: rgba(255,255,255,.06); border-radius: var(--radio); padding: 1.4rem; border-top: 4px solid var(--rojo); }
.porque__rejilla h3 { font-size: 1.15rem; color: #fff; }
.porque__rejilla p { color: #E6D6D9; font-size: .9rem; margin: 0; font-weight: 500; }

/* ── Contacto ─────────────────────────────────────────────────────────── */
.contacto { background: #fff; padding: 3.4rem 0; }
.contacto__int { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contacto__texto h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.contacto__texto p { color: var(--tinta); font-weight: 500; }
.contacto__vias { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .95rem; }
.contacto__vias li { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: .8rem; }
.contacto__etiqueta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.contacto__valor { font-size: 1rem; font-weight: 700; color: var(--tinta); text-decoration: none; }
a.contacto__valor:hover { color: var(--vino); text-decoration: underline; }
.contacto__valor--boton { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--wa-osc); cursor: pointer; text-align: left; }
.contacto__valor--boton:hover { text-decoration: underline; }

/* ── Formularios ──────────────────────────────────────────────────────── */
.formulario { background: #fff; border: 1.5px solid var(--tinta); border-radius: 14px; padding: 1.7rem; }
.formulario h3 { font-size: 1.4rem; margin-bottom: 1.1rem; }
.campo { margin-bottom: .95rem; }
.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.campo label { display: block; font-size: .78rem; font-weight: 700; color: var(--gris); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .04em; }
.campo label span { color: var(--rojo); }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--tipo); font-size: .95rem; color: var(--tinta);
  padding: .66em .8em; border: 1.5px solid var(--borde); border-radius: var(--radio-sm);
  background: #fff; transition: border-color .14s ease, box-shadow .14s ease;
}
.campo textarea { resize: vertical; min-height: 4.5em; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--vino); box-shadow: 0 0 0 3px rgba(112,12,32,.14);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--rojo); background: #FFF7F7; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__aviso { margin: .85rem 0 0; font-size: .88rem; font-weight: 700; min-height: 1.2em; }
.formulario__aviso.es-error { color: var(--rojo); }
.formulario__aviso.es-ok { color: #14713A; }
.formulario__legal { margin: .75rem 0 0; font-size: .75rem; color: var(--gris); }

@media (max-width: 860px) {
  .contacto__int { grid-template-columns: 1fr; gap: 1.8rem; }
  .formulario { padding: 1.2rem; }
}

/* ── Pie: la barra de contacto de la ficha ────────────────────────────── */
.pie { background: var(--pie); color: #fff; }
.pie__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.1rem 2.4rem; padding: 1.05rem 0;
}
.pie__dato { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-size: 1rem; font-weight: 600; }
.pie__dato:hover { color: #FFC7CD; }
.pie__dato svg { width: 1.35em; height: 1.35em; fill: currentColor; flex: none; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.14); padding: 1rem 0 1.4rem; text-align: center; }
.pie__legal p { margin: 0 0 .25rem; font-size: .82rem; color: #D9C4C8; }
.pie__legal strong { color: #fff; }
.pie__fino { font-size: .74rem !important; color: #A78A90 !important; margin-top: .5rem !important; }

/* ── WhatsApp flotante ────────────────────────────────────────────────── */
.wa-flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--wa); color: #06301A; box-shadow: 0 8px 22px rgba(0,0,0,.3);
  display: none; align-items: center; justify-content: center;
}
.wa-flotante svg { width: 30px; height: 30px; fill: currentColor; }
.wa-flotante:hover { background: var(--wa-osc); color: #fff; }
@media (max-width: 900px) { .wa-flotante { display: flex; } }

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__fondo { position: absolute; inset: 0; background: rgba(20,8,12,.74); backdrop-filter: blur(3px); }
.modal__caja {
  position: relative; width: min(100%, 430px); max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 14px; padding: 1.8rem 1.6rem 1.6rem;
  box-shadow: var(--sombra-lg); border-top: 6px solid var(--vino);
}
.modal__cerrar {
  position: absolute; top: .45rem; right: .65rem;
  background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--gris);
  cursor: pointer; padding: .1em .25em; border-radius: 6px;
}
.modal__cerrar:hover { color: var(--tinta); background: var(--hueso); }
.modal__caja h2 { font-size: 1.6rem; }
.modal__bajada { font-size: .9rem; color: var(--gris); margin-bottom: 1.2rem; font-weight: 500; }
.modal__equipo {
  background: #FBF2F4; border: 1px solid #EBD4D9; border-radius: var(--radio-sm);
  padding: .6rem .8rem; font-size: .85rem; color: var(--vino); margin: 0 0 .9rem; font-weight: 600;
}
.modal__equipo strong { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--gris); margin-bottom: .1rem; }