/* ==========================================================================
   Pedir Taxis en Málaga · pedirtaxisenmalaga.com
   --------------------------------------------------------------------------
   Identidad de Málaga que pidió el encargo: verde mar (#0B7A5F) sobre blanco,
   tinta #10231D y aire de Costa del Sol. Nada que ver con las demás webs de
   taxis de la plataforma: aquí las formas son redondas, los fondos van en
   tonos de mar, y las secciones se separan con una ola.

   Móvil primero, contraste AA, sin frameworks y sin fuentes externas (la
   gente pide el taxi desde el teléfono y con la red del aeropuerto).
   ========================================================================== */

:root {
  --verde: #0B7A5F;
  --verde-oscuro: #075C47;
  --verde-hondo: #063E30;
  --verde-claro: #E4F2EC;
  --verde-papel: #F3F9F6;
  --tinta: #10231D;
  --texto: #1D3A32;
  --texto-suave: #4B6A61;
  --borde: #D5E5DE;
  --borde-fuerte: #B4CFC4;
  --espuma: #CFF3E5;   /* el verde más claro de la paleta: lo que se resalta sobre el verde hondo */
  --blanco: #FFFFFF;
  --radio: 18px;
  --radio-s: 12px;
  --radio-l: 28px;
  --sombra: 0 1px 2px rgba(6, 62, 48, .06), 0 8px 24px rgba(6, 62, 48, .07);
  --sombra-alta: 0 4px 10px rgba(6, 62, 48, .09), 0 24px 48px rgba(6, 62, 48, .14);
  --ancho: 1140px;

  /* El flujo de reserva (paquete taxibac/cotizador) se pinta con estos
     mismos valores: no hay que tocar el paquete para tematizarlo. */
  --cz-acento: #0B7A5F;
  --cz-acento-oscuro: #075C47;
  --cz-acento-suave: #E4F2EC;
  --cz-sobre-acento: #FFFFFF;
  --cz-tinta: #10231D;
  --cz-texto: #1D3A32;
  --cz-texto-suave: #4B6A61;
  --cz-fondo: #FFFFFF;
  --cz-fondo-2: #F3F9F6;
  --cz-borde: #D5E5DE;
  --cz-borde-fuerte: #B4CFC4;
  --cz-radio: 16px;
  --cz-radio-s: 11px;
  --cz-radio-l: 26px;
  --cz-fuente: inherit;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  color: var(--tinta);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 .55em;
  font-weight: 750;
}
h1 { font-size: clamp(2rem, 6.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.15rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
  border-radius: 6px;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.contenedor-estrecho { max-width: 760px; }

.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2rem; }

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-accion { background: var(--verde); color: #fff; box-shadow: 0 6px 16px rgba(11, 122, 95, .28); }
.btn-accion:hover { background: var(--verde-oscuro); color: #fff; }
.btn-tinta { background: var(--tinta); color: #fff; }
.btn-tinta:hover { background: #061a15; color: #fff; }
.btn-blanco { background: #fff; color: var(--verde-hondo); border-color: var(--borde-fuerte); }
.btn-blanco:hover { background: var(--verde-claro); color: var(--verde-hondo); }
.btn-contorno { background: transparent; color: var(--verde-oscuro); border-color: var(--verde); }
.btn-contorno:hover { background: var(--verde-claro); }
.btn-grande { padding: .9rem 1.7rem; font-size: 1.03rem; }

/* --- Cabecera ----------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--borde);
}

.cabecera-tel-franja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .4rem 1rem;
  background: var(--verde-hondo);
  color: #fff;
  font-size: .85rem;
  text-decoration: none;
}
.cabecera-tel-franja b { font-size: .95rem; }
@media (min-width: 900px) { .cabecera-tel-franja { display: none; } }

.cabecera-fila {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 66px;
}

.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinta); }
.logo-texto {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: 1.02rem;
  text-transform: uppercase;
}
.logo-texto span { display: block; color: var(--verde); font-size: 1.16rem; }

.cabecera-tel { display: none; }
@media (min-width: 900px) {
  .cabecera-tel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    color: var(--tinta);
    text-decoration: none;
  }
  .cabecera-tel:hover { color: var(--verde-oscuro); }
  .cabecera-tel-texto { display: flex; flex-direction: column; line-height: 1.15; }
  .cabecera-tel-texto small { font-size: .72rem; color: var(--texto-suave); }
  .cabecera-tel-texto b { font-size: .98rem; }
}

.cabecera-cotizar { margin-left: auto; }
@media (min-width: 900px) { .cabecera-cotizar { display: none; } }

.menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
}
@media (min-width: 900px) { .menu-boton { display: none; } }

.nav { display: none; }
.nav.abierto {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  width: 100%;
  padding: .6rem 0 1rem;
  border-top: 1px solid var(--borde);
}
.nav a, .nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
  padding: .62rem .2rem;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
}
.nav a[aria-current="page"] { color: var(--verde-oscuro); }
.nav summary { cursor: pointer; list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav-grupo[open] > summary .icono { transform: rotate(180deg); }
.nav-grupo-panel { display: flex; flex-direction: column; padding-left: .8rem; border-left: 2px solid var(--verde-claro); }
.nav-grupo-panel a { font-weight: 500; font-size: .96rem; padding: .48rem .2rem; }
.nav > .btn { display: none; }

@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: .2rem;
    width: auto;
    margin-left: .6rem;
    padding: 0;
    border: 0;
  }
  .nav a, .nav summary { padding: .5rem .72rem; font-size: .96rem; }
  .nav-grupo { position: relative; }
  .nav-grupo-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 268px;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
  }
  .nav-grupo-panel a { padding: .55rem .7rem; }
  .nav-grupo-panel a:hover { background: var(--verde-papel); }
  .nav > .btn { display: inline-flex; margin-left: .5rem; }
}

/* --- Migas -------------------------------------------------------------- */

.migas { background: var(--verde-papel); border-bottom: 1px solid var(--borde); font-size: .86rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin: 0; padding: .7rem 0; list-style: none; }
.migas li + li::before { content: "›"; margin-right: .55rem; color: var(--borde-fuerte); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--verde-oscuro); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 2.4rem 0 4.6rem;
  color: #fff;
  background:
    radial-gradient(90rem 40rem at 78% -18%, rgba(255, 255, 255, .16), transparent 58%),
    linear-gradient(168deg, #0B7A5F 0%, #086A53 42%, #063E30 100%);
  overflow: hidden;
}
/* La ola que cierra el hero: es el aire de la Costa del Sol y evita el corte
   recto entre el verde y el blanco de la página. */
.hero::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -1px;
  height: 58px;
  background: var(--blanco);
  border-radius: 100% 100% 0 0 / 58px 58px 0 0;
}
.hero--interior { padding-top: 1.8rem; padding-bottom: 4rem; }

.hero-rejilla { position: relative; z-index: 1; display: grid; gap: 1.6rem; }
.hero-texto, .hero-buscador { min-width: 0; }
.hero-texto > :last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
  /* El buscador ocupa las dos filas de la derecha y los avales se meten
     debajo del texto: así no queda un hueco verde entre la entradilla y el
     final de la lámina blanca. */
  .hero-rejilla { grid-template-columns: minmax(0, 1fr) minmax(430px, 46%); align-items: start; gap: 1.6rem 2.8rem; }
  .hero-texto { grid-column: 1; grid-row: 1; }
  .hero-buscador { grid-column: 2; grid-row: 1 / span 2; }
  .hero-avales { grid-column: 1; grid-row: 2; align-self: end; flex-direction: column; gap: .55rem; margin-top: .2rem; }
  .hero--buscador h1 { max-width: 19ch; }
  .hero--buscador .hero-sub { max-width: 46ch; }
  .hero { padding: 3.4rem 0 5.2rem; }
}

.hero-texto h1 { color: #fff; margin-bottom: .5rem; }
.hero-texto h1 em { font-style: normal; color: var(--espuma); }
.hero-sub { font-size: 1.07rem; color: rgba(255, 255, 255, .92); max-width: 46ch; }

.antetitulo {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* El buscador es parte del hero: la lámina blanca es la del propio buscador
   (el paquete ya la pinta), no una caja nuestra alrededor. Envolverlo en otra
   tarjeta dejaba tarjeta dentro de tarjeta, que es justo lo que no se quiere. */
.hero-buscador {
  /* Contenedor de consulta: el flujo de reserva trae reglas pensadas para el
     ancho de la PANTALLA (a partir de 720 px reparte el pie en dos columnas),
     y aquí manda el ancho de la lámina, no el del monitor. */
  container-type: inline-size;
  color: var(--texto);
}
.hero-buscador .cz-buscador { box-shadow: var(--sombra-alta); border-color: rgba(255, 255, 255, .5); }
.hero-buscador h2, .hero-buscador h3 { color: var(--tinta); }

@container (max-width: 560px) {
  /* El botón y la nota del precio, uno debajo del otro: en 460 px la nota se
     quedaba en una columna de tres palabras de ancho. */
  .hero-buscador .cz-buscador-pie { grid-template-columns: 1fr; gap: .6rem; }
  .hero-buscador .cz-detalles { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .hero-buscador .cz-detalles > .cz-interruptor { grid-column: 1 / -1; }
}

.hero-avales {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.3rem;
  margin-top: .3rem;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: rgba(255, 255, 255, .9);
}
.hero-avales li { display: flex; align-items: center; gap: .4rem; }
.hero-avales .icono { color: var(--espuma); }
@media (min-width: 980px) { .hero-avales { grid-column: 1 / -1; } }

/* --- Secciones ---------------------------------------------------------- */

.seccion { padding: 3.2rem 0; }
.seccion--mar { background: var(--verde-papel); }
.seccion--tinta { background: var(--verde-hondo); color: #D9E9E3; }
.seccion--tinta h2, .seccion--tinta h3 { color: #fff; }
.seccion--tinta .antetitulo { background: rgba(255, 255, 255, .14); }

.encabezado-seccion { max-width: 62ch; margin-bottom: 1.9rem; }
.encabezado-seccion .antetitulo { background: var(--verde-claro); color: var(--verde-oscuro); }
.seccion--tinta .encabezado-seccion .antetitulo { color: #fff; }
.encabezado-seccion p { color: var(--texto-suave); font-size: 1.04rem; margin-bottom: 0; }
.seccion--tinta .encabezado-seccion p { color: #B9D3CA; }

/* --- Rejillas y tarjetas ------------------------------------------------ */

.rejilla { display: grid; gap: 1rem; }
.rejilla-2 { grid-template-columns: 1fr; }
.rejilla-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .rejilla-2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  display: block;
  padding: 1.25rem 1.3rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); }
.tarjeta h3 { margin-bottom: .35rem; }
.tarjeta p { color: var(--texto-suave); font-size: .96rem; margin-bottom: 0; }
.tarjeta-cabecera { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }

.icono-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 13px;
  background: var(--verde-claro);
  color: var(--verde-oscuro);
}
.seccion--tinta .tarjeta {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.seccion--tinta .tarjeta p { color: #B9D3CA; }
.seccion--tinta .icono-caja { background: rgba(255, 255, 255, .12); color: var(--espuma); }

/* --- Los tres pasos ----------------------------------------------------- */

.pasos { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.pasos li { position: relative; counter-increment: paso; padding-top: 3.2rem; }
.pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
}
/* La línea que une los pasos, como la ruta del taxi. */
@media (min-width: 860px) {
  .pasos li::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 58px;
    right: -2rem;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--borde-fuerte) 0 8px, transparent 8px 16px);
  }
  .pasos li:last-child::after { display: none; }
}
.pasos h3 { margin-bottom: .3rem; }
.pasos p { color: var(--texto-suave); margin-bottom: 0; }

/* --- Prosa de las páginas de contenido ---------------------------------- */

.prosa h2 { margin-top: 2.3rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.7rem; font-size: 1.08rem; color: var(--verde-hondo); }
.prosa ul { margin: 0 0 1.2rem; padding-left: 0; list-style: none; }
.prosa li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.prosa li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
}
.prosa a { font-weight: 600; }

/* --- Enlaces sueltos ---------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chips a {
  display: inline-block;
  padding: .42rem .9rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--verde-hondo);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.chips a:hover { background: var(--verde-claro); border-color: var(--borde-fuerte); }

.lista-enlaces { display: grid; gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .lista-enlaces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lista-enlaces { grid-template-columns: repeat(3, 1fr); } }
.lista-enlaces a { font-size: .94rem; color: var(--verde-hondo); }

/* --- Preguntas frecuentes ----------------------------------------------- */

.faq { display: grid; gap: .7rem; }
.faq details {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: .2rem 1.1rem;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  font-weight: 800;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1rem; margin: 0; color: var(--texto-suave); }

/* --- Franja de cierre --------------------------------------------------- */

.franja { background: var(--verde); color: #fff; }
.franja .contenedor {
  display: grid;
  gap: 1.2rem;
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
}
@media (min-width: 880px) {
  .franja .contenedor { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}
.franja h2 { color: #fff; margin-bottom: .3rem; font-size: clamp(1.35rem, 3.4vw, 1.9rem); }
.franja p { color: rgba(255, 255, 255, .92); margin: 0; }

/* --- Formularios -------------------------------------------------------- */

.campo { display: block; margin-bottom: 1.05rem; }
.campo > span, .campo-titulo {
  display: block;
  margin-bottom: .32rem;
  font-weight: 650;
  font-size: .93rem;
  color: var(--tinta);
}
.campo .pista { display: block; font-weight: 400; font-size: .85rem; color: var(--texto-suave); margin-top: .2rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="datetime-local"], input[type="number"], input[type="file"], select, textarea {
  width: 100%;
  padding: .72rem .85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
}
textarea { min-height: 170px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(11, 122, 95, .35); outline-offset: 1px; border-color: var(--verde); }
.error-campo { display: block; margin-top: .3rem; color: #A3251B; font-size: .88rem; font-weight: 600; }
.aviso {
  padding: .95rem 1.1rem;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde);
  background: var(--verde-papel);
  margin-bottom: 1.4rem;
}
.aviso--error { background: #FDECEA; border-color: #F3C3BC; color: #7E1A12; }
.aviso--ok { background: var(--verde-claro); border-color: var(--borde-fuerte); }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; }
.casilla input { width: auto; margin-top: .25rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Datos de contacto -------------------------------------------------- */

.contacto-datos { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .95rem; }

.bloque-datos { display: grid; gap: 1rem; }
@media (min-width: 720px) { .bloque-datos { grid-template-columns: repeat(2, 1fr); } }

/* --- Pie ---------------------------------------------------------------- */

.pie { background: var(--verde-hondo); color: #C8DFD7; padding: 2.8rem 0 1.6rem; font-size: .95rem; }
.pie a { color: #E3F1EC; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie .logo { color: #fff; }
.pie .logo-texto span { color: #7FD4B8; }
.pie h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .8rem; }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.pie-rejilla { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.2rem; } }
.pie-legal {
  display: grid;
  gap: .6rem;
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .85rem;
  color: #9FC3B8;
}
@media (min-width: 880px) { .pie-legal { grid-template-columns: 1fr auto; align-items: center; } }

/* --- Página de error ---------------------------------------------------- */

.error-pagina { padding: 4.5rem 0; text-align: center; }
.error-pagina .numero { font-size: 4rem; font-weight: 800; color: var(--verde); line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Cabecera sencilla (contacto, legales, errores) --------------------- */

.portada {
  padding: 2.6rem 0 2.2rem;
  background: linear-gradient(170deg, var(--verde-claro), var(--verde-papel));
  border-bottom: 1px solid var(--borde);
}
.portada .antetitulo { background: var(--verde); color: #fff; }
.portada h1 { margin-bottom: .4rem; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.portada p { max-width: 62ch; color: var(--texto-suave); margin-bottom: 0; }

.canales { display: grid; gap: 1rem; }
@media (min-width: 720px) { .canales { grid-template-columns: repeat(2, 1fr); } }
.canal { display: flex; flex-direction: column; gap: .35rem; }
.canal p { flex: 1; }
.canal-dato {
  display: inline-block;
  margin-top: .5rem;
  font-weight: 700;
  color: var(--verde-oscuro);
  word-break: break-word;
}

.texto-suave { color: var(--texto-suave); }

/* --- Formulario de reclamaciones --------------------------------------- */

.rejilla-formulario { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 780px) { .rejilla-formulario { grid-template-columns: 1fr; } }
.ancho-total { grid-column: 1 / -1; }
.campo label {
  display: block;
  margin-bottom: .32rem;
  font-weight: 650;
  font-size: .93rem;
  color: var(--tinta);
}
.reclamacion-intro { max-width: 70ch; color: var(--texto-suave); margin-bottom: 1.4rem; }
.formulario-reclamacion { display: flex; flex-direction: column; gap: 1.1rem; }
.formulario-reclamacion .campo { margin-bottom: 0; }
.formulario-reclamacion select { appearance: auto; }
.campo-ayuda { margin: .3rem 0 0; font-size: .84rem; color: var(--texto-suave); }
.contador { font-weight: 700; color: var(--tinta); }
.contador[data-ok="1"] { color: var(--verde-oscuro); }
.datos-conductor {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-s);
  padding: .8rem 1rem;
  background: #fff;
}
.datos-conductor summary { cursor: pointer; font-weight: 700; color: var(--tinta); }
.datos-conductor[open] summary { margin-bottom: .8rem; }
.campo-sitio { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consentimiento-reclamacion { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--texto-suave); }
.consentimiento-reclamacion input { margin-top: .25rem; flex: none; width: auto; accent-color: var(--verde); }
.reclamacion-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.reclamacion-envio p { margin: 0; color: var(--texto-suave); font-size: .9rem; }
@media (max-width: 600px) { .reclamacion-envio .btn { width: 100%; } }
.aviso-errores {
  margin: 0 0 1.2rem;
  padding: .85rem 1rem;
  border-radius: var(--radio-s);
  background: #FDECEA;
  border: 1px solid #F3C3BC;
  color: #7E1A12;
}
.aviso-errores ul { margin: .4rem 0 0 1.1rem; }
.pasos-reclamacion { padding-left: 1.3rem; }
.pasos-reclamacion li { margin-bottom: .5rem; }

/* --- Páginas legales ---------------------------------------------------- */

.legal { max-width: 78ch; }
.legal h2 { margin-top: 2.2rem; font-size: 1.35rem; }
.legal h3 { margin-top: 1.5rem; font-size: 1.05rem; color: var(--verde-hondo); }
.legal ol, .legal ul { padding-left: 1.3rem; }
.legal li { margin-bottom: .45rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: .93rem; }
.legal th, .legal td { text-align: left; padding: .6rem .7rem; border: 1px solid var(--borde); vertical-align: top; }
.legal th { background: var(--verde-papel); }
.legal-meta { color: var(--texto-suave); font-size: .9rem; }
@media print {
  .cabecera, .pie, .migas, .franja, .no-imprimir { display: none !important; }
  body { font-size: 12pt; }
}
.recibo-expediente {
  display: inline-block;
  margin-top: .8rem;
  padding: .5rem 1.1rem;
  background: var(--verde);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 1.15rem;
}

/* El pie de la rejilla de zonas: los cuatro servicios del árbol, con su
   rótulo, para que no parezcan cuatro etiquetas sueltas de una maqueta. */
.bloque-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borde);
}
.bloque-chips h3 {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}