/* ==========================================================================
   ADR Transport 2026 — Componentes
   Cabecera, menú, botones, encabezados, tarjetas, FAQ, formulario y pie.
   ========================================================================== */

/* ---------------------------------------------------------------- botones */
.btn {
  --btn-fondo: var(--rojo);
  --btn-texto: #fff;
  --btn-borde: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px;
  padding: .78em 1.45em;
  font-family: var(--f-display); font-stretch: 108%;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em;
  line-height: 1.1; text-decoration: none; text-align: center;
  color: var(--btn-texto);
  background: var(--btn-fondo);
  border: 1.5px solid var(--btn-borde);
  border-radius: var(--r-full);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), background-color .25s, color .25s, border-color .25s;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform .35s var(--curva); }
.btn:hover svg { transform: translateX(4px); }
/* Barrido de brillo al pasar el puntero */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--curva);
}
.btn:hover::after { transform: translateX(120%); }

.btn--rojo:hover { --btn-fondo: var(--rojo-hondo); box-shadow: var(--sombra-roja); }
.btn--fantasma { --btn-fondo: transparent; --btn-texto: currentColor; --btn-borde: currentColor; }
.tono-oscuro .btn--fantasma, .tono-grafito .btn--fantasma, .hero .btn--fantasma, .cabeza .btn--fantasma, .tono-rojo .btn--fantasma { --btn-texto: #fff; --btn-borde: rgba(255,255,255,.55); }
.btn--fantasma:hover { --btn-borde: var(--rojo-vivo); }
.tono-claro .btn--fantasma:hover, .tono-hueso .btn--fantasma:hover { --btn-fondo: var(--tinta); --btn-texto: #fff; --btn-borde: var(--tinta); }
.btn--blanco { --btn-fondo: #fff; --btn-texto: var(--rojo); }
.btn--blanco:hover { --btn-fondo: var(--tinta); --btn-texto: #fff; }
.btn--grande { min-height: 56px; font-size: var(--t-base); padding: .9em 1.8em; }
.btn--bloque { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: var(--t-sm);
  color: var(--rojo); text-decoration: none;
}
.tono-oscuro .enlace-flecha, .tono-grafito .enlace-flecha { color: var(--rojo-luz); }
.enlace-flecha svg { width: 1.1em; transition: transform .35s var(--curva); }
.enlace-flecha:hover svg, a:hover .enlace-flecha svg { transform: translateX(5px); }

/* ---------------------------------------------------------------- gorro y encabezados */
.gorro {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--f-display); font-stretch: 112%;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: var(--e-4);
}
.gorro::before {
  content: ''; width: 28px; height: 2px; flex: none;
  background: currentColor;
  transform: skewX(-30deg);
}
.tono-oscuro .gorro, .tono-grafito .gorro, .cabeza .gorro { color: var(--rojo-luz); }
.tono-rojo .gorro { color: #fff; }

.encabezado { max-width: 52rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.encabezado--centro { margin-inline: auto; text-align: center; }
.encabezado--centro .gorro { justify-content: center; }
.encabezado--fila { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap; }
.encabezado--fila > div { max-width: 46rem; }
.encabezado p { font-size: var(--t-md); color: var(--texto-c2); margin: 0; }
.tono-oscuro .encabezado p, .tono-grafito .encabezado p { color: var(--texto-o2); }
.tono-rojo .encabezado p { color: #F6D9D9; }

.titular em, h1 em, h2 em {
  font-style: normal;
  color: var(--rojo);
}
.tono-oscuro h1 em, .tono-oscuro h2 em, .tono-grafito h2 em, .cabeza h1 em, .hero em { color: var(--rojo-luz); }
.tono-rojo h2 em { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }

/* Titular con trazo: el texto se dibuja en contorno y se rellena al entrar */
.contorno {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
}

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--cabecera-alto);
  color: #fff;
  transition: background-color .4s var(--curva), box-shadow .4s, height .4s var(--curva), transform .45s var(--curva);
}
.cabecera::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10,10,12,.72), rgba(10,10,12,0));
  transition: opacity .4s;
}
.cabecera.esta-fija {
  --cabecera-alto: 70px;
  background: rgba(12, 12, 14, .88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linea-o);
}
.cabecera.esta-fija::before { opacity: 0; }
.cabecera.esta-oculta { transform: translateY(-100%); }
.cabecera__fila { height: var(--cabecera-alto); display: flex; align-items: center; gap: var(--e-6); transition: height .4s var(--curva); }
.cabecera__marca { display: block; flex: none; }
.cabecera__marca img { width: auto; height: 46px; transition: height .4s var(--curva); }
.cabecera.esta-fija .cabecera__marca img { height: 38px; }

.nav { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
.nav__enlace {
  position: relative;
  display: inline-flex; align-items: center; gap: .3em;
  padding: .6rem .9rem;
  font-family: var(--f-display); font-stretch: 108%; font-weight: 600; font-size: .95rem;
  color: rgba(255,255,255,.86); text-decoration: none;
  border-radius: var(--r-full);
  transition: color .25s;
}
.nav__enlace svg { width: 14px; height: 14px; transition: transform .3s var(--curva); }
.nav__enlace::after {
  content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .3rem; height: 2px;
  background: var(--rojo-vivo);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--curva);
}
.nav__enlace:hover, .nav__enlace[aria-current="page"] { color: #fff; }
.nav__enlace:hover::after, .nav__enlace[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__grupo { position: relative; }
.nav__grupo:hover .nav__enlace svg, .nav__grupo:focus-within .nav__enlace svg { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: calc(100% + .4rem); left: 50%;
  min-width: 330px;
  list-style: none; margin: 0; padding: .55rem;
  background: rgba(19, 19, 23, .97);
  border: 1px solid var(--linea-o);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .3s var(--curva), transform .3s var(--curva), visibility 0s .3s;
}
.nav__sub::before { content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.nav__grupo:hover .nav__sub, .nav__grupo:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav__sub a {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .8rem;
  color: #fff; text-decoration: none; font-size: .93rem; font-weight: 500;
  border-radius: var(--r-md);
  transition: background-color .2s;
}
.nav__sub a svg { width: 22px; height: 22px; color: var(--rojo-luz); flex: none; }
.nav__sub a:hover { background: rgba(255,255,255,.07); }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e-3); flex: none; }
.cabecera__tel {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-display); font-stretch: 108%; font-weight: 600; font-size: .92rem;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.cabecera__tel svg { width: 18px; height: 18px; color: var(--rojo-luz); }
.cabecera .btn { min-height: 44px; }

.hamburguesa {
  display: none;
  position: relative; z-index: 120;
  width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,.08); border: 1px solid var(--linea-o); border-radius: 50%;
  cursor: pointer;
  /* flex en columna, NO grid: con grid las filas se reparten el alto y el
     translateY de la X deja dos diagonales sueltas. */
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburguesa span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--curva), opacity .2s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column;
  padding: calc(var(--cabecera-alto) + 1.5rem) clamp(1.25rem, 5vw, 3rem) 2rem;
  background: var(--negro); color: #fff;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 3rem) 2.6rem);
  visibility: hidden;
  transition: clip-path .7s var(--curva), visibility 0s .7s;
}
.menu-movil.esta-abierto { clip-path: circle(150% at calc(100% - 3rem) 2.6rem); visibility: visible; transition-delay: 0s; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil > ul > li { border-bottom: 1px solid var(--linea-o); }
.menu-movil > ul > li > a {
  display: block; padding: .85rem 0;
  font-family: var(--f-display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.3rem);
  color: #fff; text-decoration: none;
}
.menu-movil ul ul { padding-bottom: .8rem; }
.menu-movil ul ul a { display: block; padding: .4rem 0 .4rem 1rem; color: var(--texto-o2); text-decoration: none; border-left: 2px solid var(--rojo-vivo); }
.menu-movil__pie { margin-top: auto; padding-top: var(--e-6); display: grid; gap: var(--e-3); }
body.menu-abierto { overflow: hidden; }
/* La cabecera fija crea su propio contexto de apilado (z-index 100): el
   z-index 120 de la hamburguesa no le gana al panel (110) y la X quedaba
   tapada. Con el menú abierto la cabecera entera sube por encima. */
body.menu-abierto .cabecera { z-index: 130; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-abierto .cabecera .btn, body.menu-abierto .cabecera__tel { visibility: hidden; }

@media (max-width: 1180px) {
  .cabecera__tel { display: none; }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .hamburguesa { display: inline-flex; }
  /* El empuje a la derecha va en las acciones: la nav desaparece y su
     margin-inline:auto ya no separa la hamburguesa del logotipo. */
  .cabecera__acciones { margin-left: auto; }
}
@media (max-width: 520px) {
  .cabecera .btn { display: none; }
  .cabecera__marca img { height: 40px; }
}

/* ---------------------------------------------------------------- cabeza de página interior */
.cabeza {
  position: relative;
  min-height: clamp(26rem, 58vh, 38rem);
  display: flex; align-items: flex-end;
  padding: calc(var(--cabecera-alto) + 3rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--negro); color: #fff;
  overflow: clip;
  isolation: isolate;
}
.cabeza--corta { min-height: clamp(20rem, 42vh, 28rem); }
.cabeza__foto { position: absolute; inset: -8% 0; z-index: -3; }
.cabeza__foto img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--parallax, 0px)) scale(1.06); }
.cabeza::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.86) 38%, rgba(10,10,12,.42) 70%, rgba(10,10,12,.2) 100%),
    linear-gradient(to top, rgba(10,10,12,.9), transparent 45%);
}
/* Cuña roja en diagonal: el recurso de las piezas gráficas del cliente */
.cabeza::after {
  content: ''; position: absolute; z-index: -1;
  right: -4%; bottom: -1px; width: 38%; height: 72%;
  background: linear-gradient(135deg, var(--rojo-vivo), var(--rojo) 60%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .92;
  animation: cuña-entra 1.2s var(--curva) both;
}
@keyframes cuña-entra { from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); } }
.cabeza__perforado {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: -1;
  background: var(--perforado-claro);
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent);
  mask-image: linear-gradient(to left, #000 20%, transparent);
}
.cabeza__cuerpo { position: relative; max-width: 54rem; }
.cabeza h1 { font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.4rem); margin-bottom: var(--e-5); }
.cabeza__entrada { font-size: var(--t-md); color: #D9D9E0; max-width: 42rem; margin-bottom: var(--e-6); }
.cabeza__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.cabeza__meta { display: flex; flex-wrap: wrap; gap: var(--e-5); color: var(--texto-o2); font-size: var(--t-sm); }
.cabeza__meta span { display: inline-flex; align-items: center; gap: .45em; }
.cabeza__meta svg { width: 16px; height: 16px; color: var(--rojo-luz); }

.migas { margin-bottom: var(--e-5); }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: var(--t-sm); }
.migas li { display: inline-flex; align-items: center; gap: .6rem; color: var(--texto-o2); }
.migas li + li::before { content: '/'; color: rgba(255,255,255,.35); }
.migas a { color: var(--texto-o2); text-decoration: none; }
.migas a:hover { color: #fff; }
.migas [aria-current] { color: #fff; }

/* ---------------------------------------------------------------- marquesina */
.marquesina {
  position: relative;
  overflow: clip;
  padding-block: clamp(1rem, .7rem + 1.2vw, 1.8rem);
  background: var(--rojo); color: #fff;
  border-block: 1px solid rgba(255,255,255,.14);
}
.marquesina--oscura { background: var(--negro); }
.marquesina__pista { display: flex; width: max-content; animation: marquesina 38s linear infinite; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
.marquesina__grupo { display: flex; align-items: center; flex: none; }
.marquesina__item {
  display: inline-flex; align-items: center; gap: clamp(1rem, .6rem + 1.5vw, 2.4rem);
  padding-right: clamp(1rem, .6rem + 1.5vw, 2.4rem);
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.01em;
  text-transform: uppercase; white-space: nowrap;
}
.marquesina__item:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.marquesina__item svg { width: .7em; height: .7em; color: #fff; }
@keyframes marquesina { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquesina__pista { animation: none; } }

/* ---------------------------------------------------------------- tarjetas de servicio */
.rejilla { display: grid; gap: clamp(1rem, .6rem + 1.5vw, 1.75rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Columnas fijas y no auto-fit: con 6 tarjetas auto-fit metía 4 por fila y
   dejaba dos huérfanas. */
@media (max-width: 1100px) { .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); } }

.tarjeta-servicio {
  --mx: 50%; --my: 50%;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 30rem;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--carbon);
  color: #fff; text-decoration: none;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--linea-o);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.tarjeta-servicio:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(255,90,82,.5), var(--sombra); }
.tarjeta-servicio__foto { position: absolute; inset: 0; z-index: -2; }
.tarjeta-servicio__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--curva), filter .6s; filter: saturate(.85); }
.tarjeta-servicio:hover .tarjeta-servicio__foto img { transform: scale(1.1); filter: saturate(1.05); }
.tarjeta-servicio::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10,10,12,.97) 12%, rgba(10,10,12,.78) 45%, rgba(10,10,12,.2) 100%);
}
/* Luz que sigue al puntero (app.js escribe --mx/--my). Sin preserve-3d ni
   will-change en tarjetas con foto: esa combinación dejaba la imagen sin pintar. */
.tarjeta-servicio::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(224,20,27,.32), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.tarjeta-servicio:hover::after { opacity: 1; }
.tarjeta-servicio__cuerpo { margin-top: auto; padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.tarjeta-servicio__num {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: 3.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.45);
}
.tarjeta-servicio__icono {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: var(--e-5);
  border-radius: 16px;
  background: var(--rojo); color: #fff;
  box-shadow: var(--sombra-roja);
  transition: transform .5s var(--curva-resorte);
}
.tarjeta-servicio:hover .tarjeta-servicio__icono { transform: rotate(-8deg) scale(1.08); }
.tarjeta-servicio__icono svg { width: 28px; height: 28px; }
.tarjeta-servicio h3 { font-size: var(--t-lg); margin-bottom: var(--e-3); color: #fff; }
.tarjeta-servicio p { color: #D0D0D8; font-size: .98rem; margin-bottom: var(--e-5); }
.tarjeta-servicio .enlace-flecha { color: var(--rojo-luz); }

/* ---------------------------------------------------------------- tarjeta con icono (claro) */
.tarjeta {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  background: var(--blanco);
  border: 1px solid var(--linea-c);
  border-radius: var(--r-lg);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva), border-color .3s;
}
.tono-hueso .tarjeta { background: var(--blanco); }
.tarjeta:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -26px rgba(17,17,20,.28); border-color: transparent; }
.tarjeta h3 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.tarjeta p { color: var(--texto-c2); margin: 0; font-size: .98rem; }
.tarjeta__icono {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--e-4);
  border-radius: 14px; background: #F6E3E3; color: var(--rojo);
}
.tarjeta__icono svg { width: 26px; height: 26px; }
.tono-oscuro .tarjeta, .tono-grafito .tarjeta { background: var(--carbon); border-color: var(--linea-o); color: #fff; }
.tono-oscuro .tarjeta p, .tono-grafito .tarjeta p { color: var(--texto-o2); }
.tono-oscuro .tarjeta__icono, .tono-grafito .tarjeta__icono { background: rgba(224,20,27,.16); color: var(--rojo-luz); }

/* ---------------------------------------------------------------- lista con palomitas */
.lista-check { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; gap: .65rem; }
.lista-check li { position: relative; padding-left: 2rem; }
.lista-check li::before {
  content: ''; position: absolute; left: 0; top: .28em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .38em .9em;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  border-radius: var(--r-full);
  background: #F6E3E3; color: var(--rojo);
}
.tono-oscuro .chip, .tono-grafito .chip, .cabeza .chip { background: rgba(255,255,255,.1); color: #fff; }

/* ---------------------------------------------------------------- preguntas frecuentes */
.faq { display: grid; gap: .75rem; }
.faq__item { border: 1px solid var(--linea-c); border-radius: var(--r-lg); background: var(--blanco); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq__item.esta-abierto { border-color: var(--rojo); box-shadow: 0 16px 40px -28px rgba(160,0,0,.5); }
.tono-oscuro .faq__item, .tono-grafito .faq__item { background: var(--carbon); border-color: var(--linea-o); }
.tono-oscuro .faq__item.esta-abierto, .tono-grafito .faq__item.esta-abierto { border-color: var(--rojo-vivo); }
.faq__boton {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: 1.2rem 1.4rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: var(--t-md); line-height: 1.3;
  color: inherit;
}
.faq__mas { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--rojo); transition: transform .4s var(--curva); }
.faq__mas::before, .faq__mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #fff; transform: translate(-50%, -50%); }
.faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--curva); }
.faq__boton[aria-expanded="true"] .faq__mas { transform: rotate(180deg); }
.faq__boton[aria-expanded="true"] .faq__mas::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--curva); }
.faq__item.esta-abierto .faq__cuerpo { grid-template-rows: 1fr; }
.faq__cuerpo > div { overflow: hidden; }
.faq__cuerpo p { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--texto-c2); }
.tono-oscuro .faq__cuerpo p, .tono-grafito .faq__cuerpo p { color: var(--texto-o2); }
/* Sin JS las respuestas quedan abiertas: nunca se esconde contenido */
.sin-js .faq__cuerpo { grid-template-rows: 1fr; }

/* ---------------------------------------------------------------- formulario */
.form-cotizar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.form-cotizar .campo--completo, .form-cotizar > .btn, .form-cotizar > .aviso-form, .form-cotizar > .mensaje-form { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-cotizar { grid-template-columns: minmax(0, 1fr); } }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label, .campo__titulo { font-size: var(--t-sm); font-weight: 600; }
.campo__req { color: var(--rojo); margin-left: .15em; }
.campo__ayuda { font-size: var(--t-xs); color: var(--texto-c2); margin-top: -.15rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px;
  padding: .8rem 1rem;
  background: var(--hueso);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  color: var(--tinta);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--linea-c); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background: #fff; border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(160,0,0,.14); }
.campo.tiene-error input, .campo.tiene-error select, .campo.tiene-error textarea { border-color: #C4161C; background: #FFF4F4; }
.campo__error { font-size: var(--t-xs); color: #B3141A; font-weight: 600; min-height: 0; }
.campo__error:empty { display: none; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-form { font-size: var(--t-xs); color: var(--texto-c2); margin: 0; text-align: center; }
.aviso-form a { color: var(--rojo); }
.mensaje-form { padding: .9rem 1.1rem; border-radius: var(--r-md); font-weight: 600; }
.mensaje-form--ok { background: #E6F4EA; color: #14532D; }
.mensaje-form--mal { background: #FDECEC; color: #8A1116; }

.caja-form {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: #fff; color: var(--tinta);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.6);
}
.caja-form h2, .caja-form h3 { font-size: var(--t-xl); margin-bottom: var(--e-2); }
.caja-form > p { color: var(--texto-c2); margin-bottom: var(--e-5); }
.caja-form::before {
  content: ''; position: absolute; left: 2rem; right: 2rem; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--rojo), var(--rojo-vivo));
}

/* ---------------------------------------------------------------- pie */
.pie { position: relative; background: var(--negro); color: var(--texto-o2); padding-top: clamp(4rem, 3rem + 4vw, 6.5rem); overflow: clip; }
.pie__gigante {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(2.4rem, 7.4vw, 8.8rem); line-height: .8; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.13);
  white-space: nowrap; user-select: none;
  margin: clamp(2rem, 1rem + 3vw, 4rem) 0 -.12em;
  text-align: center;
}
.pie__rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(2rem, 1.2rem + 2.5vw, 4rem); }
@media (max-width: 1000px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pie__rejilla { grid-template-columns: minmax(0, 1fr); } }
.pie__marca img { height: 60px; width: auto; margin-bottom: var(--e-5); }
.pie__marca p { font-size: var(--t-sm); max-width: 24rem; }
.pie h2 { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: var(--e-5); font-stretch: 112%; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a { color: var(--texto-o2); text-decoration: none; transition: color .2s; }
.pie a:hover { color: #fff; }
.pie__dato { display: flex; gap: .7rem; font-size: var(--t-sm); margin-bottom: .9rem; line-height: 1.5; }
.pie__dato svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--rojo-luz); }
.pie__dato strong { color: #fff; font-weight: 600; display: block; }
.pie__credenciales { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e-5); }
.pie__credenciales span { font-size: var(--t-xs); padding: .35em .8em; border: 1px solid var(--linea-o); border-radius: var(--r-full); color: #D6D6DE; }
.pie__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3);
  padding-block: var(--e-5);
  border-top: 1px solid var(--linea-o);
  font-size: var(--t-xs);
}

/* ---------------------------------------------------------------- botón flotante */
.flotante {
  position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.2rem .85rem .95rem;
  background: var(--rojo); color: #fff;
  font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: var(--t-sm);
  text-decoration: none;
  border-radius: var(--r-full);
  box-shadow: var(--sombra-roja);
  transform: translateY(140%); opacity: 0;
  transition: transform .5s var(--curva), opacity .4s, background-color .25s;
}
.flotante.es-visible { transform: none; opacity: 1; }
.flotante:hover { background: var(--rojo-hondo); }
.flotante svg { width: 22px; height: 22px; }
.flotante::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(224,20,27,.55);
  animation: latido 2.6s infinite;
}
@keyframes latido { 70% { box-shadow: 0 0 0 16px rgba(224,20,27,0); } 100% { box-shadow: 0 0 0 0 rgba(224,20,27,0); } }
@media (prefers-reduced-motion: reduce) { .flotante::before { animation: none; } }
.menu-abierto .flotante { opacity: 0; pointer-events: none; }

/* Barra de administración de WordPress (usuarios con sesión iniciada) */
.admin-bar .cabecera { top: 32px; }
.admin-bar .menu-movil { padding-top: calc(var(--cabecera-alto) + 32px + 1.5rem); }
@media (max-width: 782px) {
  .admin-bar .cabecera { top: 46px; }
  .admin-bar .menu-movil { padding-top: calc(var(--cabecera-alto) + 46px + 1.5rem); }
}
@media (max-width: 600px) { .admin-bar .cabecera.esta-fija { top: 0; } }

/* ---------------------------------------------------------------- selector de idioma EN | ES */
.idioma {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 3px 3px 10px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-full);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.idioma > svg { width: 16px; height: 16px; margin-right: 4px; color: var(--rojo-luz); flex: none; }
.idioma__op {
  display: grid; place-items: center;
  min-width: 34px; height: 30px; padding: 0 .55rem;
  font-family: var(--f-display); font-stretch: 112%; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  color: rgba(255,255,255,.72); text-decoration: none;
  border-radius: var(--r-full);
  transition: background-color .25s, color .25s;
}
.idioma__op:hover { color: #fff; background: rgba(255,255,255,.1); }
.idioma__op[aria-current] { background: var(--rojo); color: #fff; }
.idioma--movil { align-self: flex-start; padding: 4px 4px 4px 12px; }
.idioma--movil .idioma__op { min-width: 48px; height: 38px; font-size: .9rem; }
@media (max-width: 1280px) { .cabecera__tel { display: none; } }
@media (max-width: 520px) { .cabecera .idioma > svg { display: none; } .cabecera .idioma { padding-left: 3px; } }
body.menu-abierto .cabecera .idioma { visibility: hidden; }