/* ============================================================
   Lo propio de Every Benefits · va DESPUES de traje.css
   ------------------------------------------------------------
   El traje trae la barra, los botones, las tarjetas, los pasos,
   las preguntas y el cierre. Aqui solo estan las piezas que este
   proyecto necesita y que alli no existian:

     1 · el conmutador de idioma
     2 · las dos puertas del hero (agente / agencia)
     3 · la parrilla de carriers
     4 · los mockups de la plataforma
     5 · las pestanas de los dos caminos
     6 · el formulario del cierre
     7 · el mapa de estados
   ============================================================ */

/* ---------- 1 · conmutador de idioma ---------- */
.idioma{display:inline-flex; border:1px solid var(--linea); border-radius:99px; padding:3px; background:var(--papel); flex:none}
.idioma button{border:0; background:transparent; cursor:pointer; font-family:var(--cuerpo); font-size:13px; font-weight:600;
  color:var(--tinta-suave); padding:5px 13px; border-radius:99px; transition:background .25s ease, color .25s ease}
.idioma button.puesto{background:var(--verde-claro); color:var(--verde)}
.idioma button:hover:not(.puesto){color:var(--tinta)}

/* ---------- 2 · las dos puertas ---------- */
.puertas{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; max-width:560px}
.puerta{position:relative; overflow:hidden; display:block; text-decoration:none; color:inherit; background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio-grande); padding:20px 22px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease}
.puerta::after{content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--verde); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.puerta:hover{transform:translateY(-4px); border-color:var(--verde-borde); box-shadow:0 16px 36px rgba(18,16,13,.08)}
.puerta:hover::after{transform:scaleX(1)}
.puerta b{display:block; font-family:var(--titulo); font-size:18px; letter-spacing:-.02em}
.puerta small{display:block; margin-top:5px; color:var(--tinta-suave); font-size:13.5px; line-height:1.5}
.puerta .flecha{position:absolute; top:18px; right:18px; color:var(--verde); transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.puerta:hover .flecha{transform:translate(3px,-3px)}
@media(max-width:560px){.puertas{grid-template-columns:1fr}}

/* ---------- 3 · parrilla de carriers ---------- */
.carriers{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:30px}
.carrier{display:grid; place-items:center; height:78px; background:var(--papel); border:1px solid var(--linea); border-radius:12px;
  font-family:var(--titulo); font-size:14px; letter-spacing:-.01em; color:var(--tinta-suave); text-align:center; padding:0 10px; line-height:1.25;
  transition:color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1)}
.carrier:hover{color:var(--verde); border-color:var(--verde-borde); transform:translateY(-3px)}
.carrier.mas{background:var(--verde-claro); border-color:var(--verde-borde); color:var(--verde)}
@media(max-width:900px){.carriers{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.carriers{grid-template-columns:repeat(2,1fr)}}

/* la pieza alta del hero, cuando lleva dentro una pantalla en vez de una foto */
.pieza-alta.con-pantalla{height:auto; padding:22px; background:#e6e7db; display:block; overflow:visible}

/* ---------- 4 · los mockups de la plataforma ---------- */
.pantalla{background:var(--papel); border:1px solid var(--linea); border-radius:18px; overflow:hidden;
  box-shadow:0 20px 50px rgba(18,16,13,.10)}
.pantalla .cabecera{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--linea); background:#fbfbf7}
.pantalla .cabecera i{width:9px;height:9px;border-radius:50%; background:var(--linea); display:block}
.pantalla .cabecera span{margin-left:8px; font-size:12px; color:var(--tinta-suave); font-family:var(--cuerpo)}
.pantalla .lienzo{padding:18px; display:grid; gap:14px}

.metricas{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
/* en el hero solo caben dos: la ficha de la cifra se monta sobre la tercera */
.metricas.dos{grid-template-columns:repeat(2,1fr); max-width:70%}
/* la fila del panel del hero se aparta de la ficha verde que se le monta encima */
.filas.solo-derecha{margin-left:38%}
.metrica{border:1px solid var(--linea); border-radius:12px; padding:13px 14px; background:#fdfdfa}
.metrica b{display:block; font-family:var(--titulo); font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums}
.metrica small{display:block; margin-top:3px; font-size:11.5px; color:var(--tinta-suave)}
.metrica.viva{background:var(--verde-claro); border-color:var(--verde-borde)}
.metrica.viva b{color:var(--verde)}

.barras{display:flex; align-items:flex-end; gap:7px; height:104px; padding-top:6px}
.barras i{flex:1; display:block; background:var(--verde-claro); border:1px solid var(--verde-borde); border-radius:5px 5px 0 0;
  transform-origin:bottom; transform:scaleY(0); transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.barras.dentro i{transform:scaleY(1)}
.barras i.alta{background:var(--verde); border-color:var(--verde)}

.filas{display:grid; gap:7px}
.fila{display:flex; align-items:center; gap:10px; border:1px solid var(--linea); border-radius:10px; padding:9px 12px; font-size:13px}
.fila .punto{width:8px;height:8px;border-radius:50%; background:var(--verde); flex:none}
.fila .punto.espera{background:#d8b13f}
.fila .punto.gris{background:var(--linea)}
.fila .nombre{font-weight:600}
.fila .estado{margin-left:auto; font-size:12px; color:var(--tinta-suave)}
.fila .barrita{flex:none; width:74px; height:5px; border-radius:99px; background:var(--linea); overflow:hidden}
.fila .barrita span{display:block; height:100%; background:var(--verde); border-radius:99px}

.leccion{display:flex; align-items:center; gap:12px; border:1px solid var(--linea); border-radius:12px; padding:11px 13px}
.leccion .miniatura{width:56px;height:38px;border-radius:8px; background:var(--verde-hondo); flex:none; display:grid; place-items:center}
.leccion .miniatura svg{width:14px;height:14px;fill:#fff}
.leccion b{display:block; font-size:13.5px}
.leccion small{color:var(--tinta-suave); font-size:12px}
.leccion .marca-ok{margin-left:auto; color:var(--verde); font-size:16px}

/* ---------- 5 · pestanas de los dos caminos ---------- */
.mando{display:inline-flex; gap:4px; padding:4px; background:var(--papel); border:1px solid var(--linea); border-radius:99px; margin-top:22px}
.mando button{border:0; background:transparent; cursor:pointer; font-family:var(--cuerpo); font-size:14.5px; font-weight:600; color:var(--tinta-suave);
  padding:9px 20px; border-radius:99px; transition:background .3s ease, color .3s ease}
.mando button.puesto{background:var(--verde); color:#fff}
.mando button:hover:not(.puesto){color:var(--tinta); background:rgba(18,16,13,.04)}
.hoja[hidden]{display:none}
.hoja{animation:asoma .45s cubic-bezier(.2,.7,.3,1)}
@keyframes asoma{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* dos columnas: el texto a un lado, la pantalla al otro */
.dos-columnas{display:grid; grid-template-columns:1fr 1.06fr; gap:56px; align-items:center; margin-top:34px}
@media(max-width:980px){.dos-columnas{grid-template-columns:1fr; gap:34px}}
.lista-marcas{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; font-size:15.5px; color:var(--tinta-suave)}
.lista-marcas li{display:flex; gap:11px; align-items:flex-start}
.lista-marcas svg{width:19px;height:19px;flex:none;margin-top:4px;stroke:var(--verde);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 6 · formulario del cierre ---------- */
.formulario{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:560px; margin:26px auto 0; text-align:left}
.formulario label{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:6px}
.formulario input, .formulario select{width:100%; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:#fff; padding:0 14px; font-family:var(--cuerpo); font-size:15px; outline:none; transition:border-color .25s ease, background .25s ease}
.formulario input::placeholder{color:rgba(255,255,255,.4)}
.formulario input:focus, .formulario select:focus{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.14)}
.formulario select option{color:var(--tinta)}
.formulario .ancho{grid-column:1 / -1}
.formulario .btn{width:100%; background:#fff; color:var(--verde-hondo); min-height:50px; font-weight:600}
.formulario .btn::before{background:var(--verde)}
.formulario .btn:hover{color:#fff}
.letra-chica{grid-column:1 / -1; font-size:12.5px; color:rgba(255,255,255,.5); text-align:center; margin-top:2px}
@media(max-width:560px){.formulario{grid-template-columns:1fr}}

/* ---------- 7 · mapa de estados ---------- */
.estados{display:flex; flex-wrap:wrap; gap:6px; margin-top:26px; max-width:820px}
.estados span{font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--tinta-suave); background:var(--papel);
  border:1px solid var(--linea); border-radius:8px; padding:5px 9px; transition:color .25s ease, border-color .25s ease}
.estados span:hover{color:var(--verde); border-color:var(--verde-borde)}
.estados span.apagado{opacity:.38}

/* ---------- el rotulo sobre fondo verde hondo ---------- */
.cierre .rotulo{color:#9fe3c4}


/* ============================================================
   8 · LA PRIMERA PANTALLA, AL ESTILO WECARE

   El hero que pidió Sebas (wecare-healthcare.framer.website):
   fondo claro a sangre, titular grande a la izquierda con dos
   botones y la prueba social debajo, y a la derecha la foto del
   equipo recortada apoyada en la base, con dos fichas blancas
   flotando encima.

   Sustituye al hero de mosaico que traía el traje de Chillin.
   ============================================================ */

.hero.wecare{background:var(--verde-claro); padding:64px 0 0; overflow:hidden}
.hero.wecare .env{grid-template-columns:1.04fr .96fr; gap:40px; align-items:end}
.hero.wecare .columna-texto{padding-bottom:96px}
.hero.wecare h1{font-size:clamp(40px,4.6vw,60px)}
.hero.wecare .entradilla{max-width:42ch}
.hero.wecare .acciones{margin-top:32px; gap:14px}
.hero.wecare .btn-linea{border-color:var(--verde-borde); color:var(--verde); background:transparent}
.hero.wecare .btn-linea::before{background:var(--verde)}
.hero.wecare .btn-linea:hover{color:#fff; border-color:var(--verde)}

/* la prueba social: caras apiladas y una cifra */
.prueba-social{margin-top:34px; display:flex; align-items:center; gap:15px}
.pila{display:flex}
.pila span{width:42px; height:42px; border-radius:50%; border:2px solid var(--verde-claro); margin-left:-13px;
  display:grid; place-items:center; font-size:13px; font-weight:600; font-family:var(--titulo); color:#fff;
  background:var(--verde); box-shadow:0 2px 6px rgba(18,16,13,.10)}
.pila span:first-child{margin-left:0}
.pila span.n2{background:#0b6b45}
.pila span.n3{background:#12986a}
.pila span.n4{background:#05301d}
.prueba-social b{display:block; font-family:var(--titulo); font-size:20px; line-height:1.15}
.prueba-social small{display:block; color:var(--tinta-suave); font-size:13.5px}

/* la columna de la foto */
.retrato{position:relative; height:clamp(400px,44vw,556px)}
.retrato .hueco{position:absolute; inset:0; border-radius:28px 28px 0 0; overflow:hidden;
  background:linear-gradient(180deg,#dcebe2 0%,#cfe3d7 100%); display:grid; place-items:center}
.retrato .hueco img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.retrato .silueta{text-align:center; color:#6f8a7c; padding:0 24px}
.retrato .silueta svg{width:76px; height:76px; stroke:currentColor; fill:none; stroke-width:1.2; opacity:.6}
.retrato .silueta em{display:block; font-style:normal; font-size:13.5px; margin-top:12px; line-height:1.5; max-width:24ch; margin-inline:auto}

/* las dos fichas que flotan sobre la foto */
.ficha-flota{position:absolute; z-index:4; background:var(--papel); border-radius:18px; padding:15px 20px;
  box-shadow:0 14px 40px rgba(18,16,13,.13), 0 2px 6px rgba(18,16,13,.05); display:flex; align-items:center; gap:13px}
.ficha-flota.arriba{top:12%; left:-26px}
.ficha-flota.abajo{bottom:56px; right:-34px}
.ficha-flota .redondo{width:44px;height:44px;border-radius:50%; background:var(--verde); display:grid; place-items:center; flex:none}
.ficha-flota .redondo svg{width:20px;height:20px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ficha-flota .mas{width:40px;height:40px;border-radius:50%; background:var(--verde); color:#fff; display:grid; place-items:center;
  font-size:19px; margin-left:-13px; border:2px solid var(--papel); flex:none}
.ficha-flota b{display:block; font-size:14.5px; font-family:var(--titulo)}
.ficha-flota small{display:block; color:var(--tinta-suave); font-size:12.5px}
.ficha-flota .grande{font-family:var(--titulo); font-size:17px; letter-spacing:-.01em}

@media(max-width:980px){
  .hero.wecare .env{grid-template-columns:1fr; gap:0}
  .hero.wecare .columna-texto{padding-bottom:44px}
  .retrato{height:clamp(320px,72vw,440px)}
  .ficha-flota.arriba{left:8px; top:10px}
  .ficha-flota.abajo{right:8px; bottom:16px}
}
@media(max-width:560px){
  .ficha-flota{padding:11px 14px; gap:9px}
  .ficha-flota .redondo{width:36px;height:36px}
  .prueba-social{margin-top:26px}
}

/* la barra comparte el fondo del hero: si no, se ve un escalon de color
   entre la cabecera y la primera pantalla */
.barra{background:rgba(233,245,238,.88)}
/* al bajar la franja desaparece y solo queda la capsula blanca flotando */
.barra.bajada{background:transparent; backdrop-filter:none}


/* ============================================================
   9 · EL RITMO DE SECCIONES, AL ESTILO WECARE

   La referencia alterna bloques de color a sangre con las
   esquinas muy redondeadas, cabeceras centradas con un rótulo
   en píldora, tarjetas con un botón circular de flecha en la
   esquina, tarjetas con visto bueno redondo, y bandas de foto
   de ancho completo entre sección y sección.
   ============================================================ */

/* el rótulo, ahora en píldora con borde */
.rotulo-pildora{display:inline-block; border:1px solid var(--verde-borde); color:var(--verde); background:transparent;
  border-radius:99px; padding:6px 17px; font-size:13px; font-weight:600; letter-spacing:.01em; margin-bottom:20px}
.bloque-verde .rotulo-pildora{border-color:rgba(255,255,255,.45); color:#fff}

.cabecera-centro{max-width:740px; margin:0 auto 8px; text-align:center}
.cabecera-centro h2{font-size:clamp(30px,3.7vw,46px)}
.cabecera-centro > p:last-child{margin-top:15px; color:var(--tinta-suave)}
.bloque-verde .cabecera-centro > p:last-child{color:rgba(255,255,255,.76)}

/* bloques de color a sangre */
section.bloque{border-radius:46px; padding:88px 0}
section.bloque-verde{background:var(--verde); color:#fff}
section.bloque-verde h2, section.bloque-verde h3, section.bloque-verde .cifra span{color:#fff}
section.bloque-verde p, section.bloque-verde .cifra small{color:rgba(255,255,255,.78)}
section.bloque-verde .cifra::before{background:rgba(255,255,255,.34)}
section.bloque-verde .lista-marcas{color:rgba(255,255,255,.8)}
section.bloque-verde .lista-marcas svg{stroke:#fff}
section.bloque-verde .lista-marcas b{color:#fff}
section.bloque-verde .mando{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24)}
section.bloque-verde .mando button{color:rgba(255,255,255,.72)}
section.bloque-verde .mando button.puesto{background:#fff; color:var(--verde-hondo)}
section.bloque-verde .mando button:hover:not(.puesto){color:#fff; background:rgba(255,255,255,.10)}
section.bloque-verde .btn{background:#fff; color:var(--verde-hondo)}
section.bloque-verde .btn::before{background:var(--verde-hondo)}
section.bloque-verde .btn:hover{color:#fff}
section.bloque-suave{background:var(--verde-claro)}
@media(max-width:720px){section.bloque{border-radius:30px; padding:58px 0}}

/* la tarjeta con el botón de flecha en la esquina */
.tarjeta-flecha{position:relative; background:var(--papel); border:1px solid var(--linea); border-radius:20px;
  padding:26px 26px 78px; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease}
.tarjeta-flecha:hover{transform:translateY(-6px); border-color:var(--verde-borde); box-shadow:0 18px 44px rgba(18,16,13,.08)}
.tarjeta-flecha h3{font-size:22px; margin:14px 0 9px}
.tarjeta-flecha p{color:var(--tinta-suave); font-size:15.5px; line-height:1.6}
.tarjeta-flecha .icono-linea{width:44px;height:44px; display:grid; place-items:center}
.tarjeta-flecha .icono-linea svg{width:32px;height:32px; stroke:var(--verde); fill:none; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round}
.flecha-circulo{position:absolute; right:22px; bottom:22px; width:46px;height:46px;border-radius:50%;
  background:var(--verde-claro); color:var(--verde); display:grid; place-items:center; font-size:17px;
  transition:background .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1)}
.tarjeta-flecha:hover .flecha-circulo{background:var(--verde); color:#fff; transform:translate(3px,-3px)}

/* la misma tarjeta, sobre el bloque verde */
.bloque-verde .tarjeta-flecha{background:transparent; border-color:rgba(255,255,255,.3)}
.bloque-verde .tarjeta-flecha:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); box-shadow:none}
.bloque-verde .tarjeta-flecha .icono-linea svg{stroke:#fff}
.bloque-verde .flecha-circulo{background:#fff; color:var(--verde-hondo)}

/* la tarjeta con el visto bueno redondo */
.tarjeta-check{background:var(--papel); border-radius:18px; padding:22px 24px; display:flex; gap:16px; align-items:flex-start;
  box-shadow:0 8px 26px rgba(18,16,13,.06); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease}
.tarjeta-check:hover{transform:translateY(-4px); box-shadow:0 16px 38px rgba(18,16,13,.10)}
.tarjeta-check .visto{width:34px;height:34px;border-radius:50%; background:var(--verde); flex:none; display:grid; place-items:center}
.tarjeta-check .visto svg{width:17px;height:17px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.tarjeta-check h3{font-size:19px; margin-bottom:6px}
.tarjeta-check p{color:var(--tinta-suave); font-size:15px; line-height:1.55}

/* la banda de foto de ancho completo */
.banda-foto{height:clamp(240px,32vw,420px); overflow:hidden}
.banda-foto img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03)}

/* la foto que acompaña a una columna de tarjetas */
.foto-lateral{border-radius:24px; overflow:hidden; min-height:100%; background:#e6e7db}
.foto-lateral img{width:100%; height:100%; object-fit:cover; display:block; min-height:440px}
@media(max-width:980px){.foto-lateral img{min-height:300px}}

/* la pantalla de la plataforma es blanca: su texto no hereda el blanco
   del bloque verde en el que está posada */
section.bloque-verde .pantalla .nombre,
section.bloque-verde .pantalla .metrica b,
section.bloque-verde .pantalla b{color:var(--tinta)}
section.bloque-verde .pantalla .estado,
section.bloque-verde .pantalla small,
section.bloque-verde .pantalla .cabecera span{color:var(--tinta-suave)}
section.bloque-verde .pantalla .metrica.viva b{color:var(--verde)}


/* ============================================================
   10 · LO QUE SE LE SACA A SOLVRA

   El fondo del hero en degradado con líneas verticales finas,
   la píldora con destello sobre el titular, una palabra en
   cursiva serif dentro del titular, el marco de arco de la foto,
   la tira de logos debajo, y el párrafo grande con frases
   resaltadas en verde.
   ============================================================ */

/* el fondo: degradado de verde a claro, con la rejilla vertical */
.hero.wecare{position:relative; background:linear-gradient(180deg,#cfe6d9 0%,#e4f2e9 44%,#f2f8f2 100%)}
.hero.wecare::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size:132px 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
.hero.wecare .env{position:relative; z-index:2}

/* la píldora con el destello */
.pildora-destello{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9); border-radius:99px; padding:8px 17px 8px 13px; font-size:13.5px; font-weight:600;
  color:var(--verde-hondo); margin-bottom:22px; box-shadow:0 2px 10px rgba(18,16,13,.05)}
.pildora-destello svg{width:16px;height:16px; stroke:var(--verde); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* la palabra en cursiva dentro del titular */
.cursiva{font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em}

/* la foto del hero, en arco */
.hero.wecare .retrato .hueco{border-radius:50% 50% 26px 26px / 32% 32% 26px 26px; border:10px solid rgba(255,255,255,.75);
  box-shadow:0 24px 60px rgba(5,48,29,.14)}

/* la tira de aseguradoras bajo el titular */
.tira-logos{margin-top:36px; padding-top:26px; border-top:1px solid rgba(5,48,29,.10); display:flex; align-items:center;
  gap:30px; flex-wrap:wrap}
.tira-logos small{width:100%; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:2px}
.tira-logos span{font-family:var(--titulo); font-size:16px; font-weight:600; color:rgba(18,16,13,.34); letter-spacing:-.01em;
  transition:color .3s ease}
.tira-logos span:hover{color:var(--verde)}
@media(max-width:980px){.tira-logos{gap:20px} .tira-logos span{font-size:14px}}

/* el párrafo grande con frases resaltadas */
.manifiesto{max-width:940px; margin:0 auto; text-align:center; font-family:var(--titulo); font-weight:700;
  font-size:clamp(24px,3.1vw,38px); line-height:1.28; letter-spacing:-.025em}
.manifiesto em{font-style:normal; color:var(--verde)}

/* el hero cabe en pantalla: la foto no puede empujar la tira de logos fuera */
.hero.wecare{padding:44px 0 0}
.hero.wecare .columna-texto{padding-bottom:52px}
.hero.wecare h1{font-size:clamp(36px,4.1vw,54px)}
.hero.wecare .retrato{height:clamp(380px,40vw,500px)}
.ficha-flota.arriba{top:16%; left:-10px}
.ficha-flota.abajo{bottom:38px; right:-24px}

/* el titular reparte sus líneas en vez de dejar una palabra suelta abajo */
.hero.wecare h1{text-wrap:balance}


/* ============================================================
   11 · EL PIE, AL ESTILO SOLVRA

   Logo grande con una frase debajo y el contacto con iconos en
   círculo a la izquierda; columnas de enlaces a la derecha; y
   abajo, separada por una línea, la fila del copyright con los
   enlaces legales.
   ============================================================ */

.pie{border-top:1px solid var(--linea); background:var(--hueso); padding:72px 0 30px; font-size:15px; color:var(--tinta-suave)}
.pie .env{display:grid; grid-template-columns:1.5fr repeat(3, minmax(0,.85fr)); gap:40px; align-items:start}

.pie-marca img{height:44px; width:auto; display:block}
.pie-marca .lema{margin-top:16px; font-family:var(--titulo); font-size:19px; color:var(--tinta); letter-spacing:-.02em; max-width:26ch}
.pie-contacto{margin-top:26px; display:grid; gap:13px}
.pie-contacto a{display:inline-flex; align-items:center; gap:13px; text-decoration:none; color:var(--tinta); font-size:15.5px}
.pie-contacto .redondo{width:40px;height:40px;border-radius:50%; background:var(--papel); border:1px solid var(--linea);
  display:grid; place-items:center; flex:none; transition:background .3s ease, border-color .3s ease}
.pie-contacto .redondo svg{width:18px;height:18px; stroke:var(--verde); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pie-contacto a:hover .redondo{background:var(--verde-claro); border-color:var(--verde-borde)}
.pie-contacto a:hover{color:var(--verde)}

.pie-columna h4{font-family:var(--cuerpo); font-size:14px; font-weight:600; color:var(--tinta-suave); margin:0 0 18px}
.pie-columna ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.pie-columna a{text-decoration:none; color:var(--tinta); font-size:15.5px; transition:color .25s ease}
.pie-columna a:hover{color:var(--verde)}

.pie-abajo{margin-top:56px; padding-top:26px; border-top:1px solid var(--linea);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:14.5px}
.pie-abajo nav{display:flex; gap:26px; flex-wrap:wrap}
.pie-abajo a{text-decoration:none; color:var(--tinta-suave); transition:color .25s ease}
.pie-abajo a:hover{color:var(--verde)}

@media(max-width:900px){
  .pie{padding:52px 0 26px}
  .pie .env{grid-template-columns:1fr 1fr; gap:34px}
  .pie-marca{grid-column:1 / -1}
  .pie-abajo{margin-top:38px}
}
@media(max-width:560px){.pie .env{grid-template-columns:1fr}}

/* la fila de abajo del pie no hereda la rejilla de cuatro columnas del pie */
.pie .env.pie-abajo{display:flex; grid-template-columns:none}
.pie-marca img{height:52px}

/* el pie va sobre fondo propio, como en Solvra: allí es un gris plano que se
   despega del cuerpo; aquí es el verde claro de la marca */
.pie{background:var(--verde-claro); border-top:0}
.pie-contacto .redondo{background:var(--papel); border-color:rgba(5,48,29,.10)}
.pie-abajo{border-top-color:rgba(5,48,29,.12)}


/* ============================================================
   12 · LAS OPINIONES, AL ESTILO ADORBIT

   Tres columnas: dos de tarjetas apiladas y, en el centro, el
   testimonio en vídeo a lo alto con su botón de reproducir.
   Cada tarjeta abre con una comilla grande y cierra con la cara,
   el nombre y el cargo.
   ============================================================ */

.opiniones{display:grid; grid-template-columns:1fr 1.04fr 1fr; gap:22px; align-items:start; margin-top:54px}
.columna-op{display:grid; gap:22px}
@media(max-width:1080px){
  .opiniones{grid-template-columns:1fr 1fr}
  .opinion-video{grid-column:1 / -1; order:-1}
}
@media(max-width:680px){.opiniones{grid-template-columns:1fr}}

.op{background:var(--papel); border:1px solid var(--linea); border-radius:22px; padding:28px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease}
.op:hover{transform:translateY(-5px); box-shadow:0 18px 44px rgba(18,16,13,.08)}
.op .comilla{display:block; width:34px; height:26px; margin-bottom:18px}
.op .comilla svg{width:100%; height:100%; fill:var(--verde-hondo)}
.op p{font-size:16.5px; line-height:1.6; color:var(--tinta)}
.op footer{margin-top:24px; display:flex; align-items:center; gap:13px}
.op .cara{width:46px;height:46px;border-radius:12px; overflow:hidden; flex:none; background:var(--verde);
  display:grid; place-items:center; color:#fff; font-family:var(--titulo); font-size:15px}
.op .cara img{width:100%;height:100%;object-fit:cover; display:block}
.op .quien b{display:block; font-family:var(--titulo); font-size:17px; letter-spacing:-.01em; color:var(--tinta)}
.op .quien small{display:block; color:var(--tinta-suave); font-size:14px; margin-top:1px}

/* el testimonio en vídeo */
.opinion-video{position:relative; border-radius:22px; overflow:hidden; min-height:520px; background:#e6e7db}
.opinion-video img{width:100%; height:100%; min-height:520px; object-fit:cover; display:block}
.opinion-video .reproducir{position:absolute; inset:0; margin:auto; width:74px;height:74px;border-radius:50%; border:0; cursor:pointer;
  background:var(--verde-hondo); display:grid; place-items:center; box-shadow:0 12px 34px rgba(5,48,29,.34);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease}
.opinion-video .reproducir svg{width:22px;height:22px; fill:#fff; margin-left:4px}
.opinion-video .reproducir:hover{transform:scale(1.08); background:var(--verde)}
.opinion-video .reproducir::before{content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(255,255,255,.55);
  animation:pulso 2.6s ease-out infinite}
.opinion-video .pie-video{position:absolute; left:0; right:0; bottom:0; padding:44px 22px 20px; color:#fff;
  background:linear-gradient(transparent, rgba(5,48,29,.82)); font-size:14.5px}
.opinion-video .pie-video b{display:block; font-family:var(--titulo); font-size:17px}
@media(max-width:1080px){.opinion-video{min-height:400px} .opinion-video img{min-height:400px}}


/* las columnas laterales pasan solas, una hacia arriba y otra hacia abajo.
   La lista va duplicada dentro: cuando la primera copia termina de subir, la
   segunda está justo donde empezó la primera, así que el salto no se ve. */
.columna-op{position:relative; overflow:hidden; height:var(--alto-op,560px); display:block;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%)}
.cinta-op{display:grid; gap:22px; animation:sube-op 34s linear infinite; will-change:transform}
.columna-op.baja .cinta-op{animation-name:baja-op}
.columna-op:hover .cinta-op{animation-play-state:paused}
@keyframes sube-op{from{transform:translateY(0)} to{transform:translateY(calc(-50% - 11px))}}
@keyframes baja-op{from{transform:translateY(calc(-50% - 11px))} to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .columna-op{height:auto; -webkit-mask-image:none; mask-image:none}
  .cinta-op{animation:none}
}
@media(max-width:1080px){
  .columna-op{height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none}
  .cinta-op{animation:none}
  .cinta-op .copia{display:none}
}

/* el vídeo mide lo mismo que las columnas que pasan a su lado */
.opiniones{--alto-op:560px}
.opinion-video{height:var(--alto-op); min-height:0}
.opinion-video img{height:100%; min-height:0}
@media(max-width:1080px){
  .opiniones{--alto-op:auto}
  .opinion-video{height:400px}
}


/* ============================================================
   13 · LA SECCIÓN DE ASEGURADORAS, AL ESTILO ALPHA

   La cifra gigante de marca de agua al fondo con su cuadrícula,
   el titular centrado con la segunda línea en verde, y los
   nombres en dos tiras que pasan en direcciones contrarias.
   ============================================================ */

.bloque-carriers{position:relative; overflow:hidden}
.marca-agua{position:absolute; top:6%; left:50%; transform:translateX(-50%); z-index:0; pointer-events:none;
  font-family:var(--titulo); font-weight:700; letter-spacing:-.05em; line-height:1;
  font-size:clamp(150px,21vw,330px); color:rgba(0,138,78,.09)}
.cuadricula{position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(1180px,92%); height:52%; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(5,48,29,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(5,48,29,.05) 1px, transparent 1px);
  background-size:118px 108px;
  -webkit-mask-image:radial-gradient(58% 62% at 50% 42%, #000 0%, transparent 76%);
  mask-image:radial-gradient(58% 62% at 50% 42%, #000 0%, transparent 76%)}
.bloque-carriers > .env, .bloque-carriers > .tiras{position:relative; z-index:2}
.cabecera-centro .en-verde{color:var(--verde)}

/* las dos tiras de aseguradoras */
.tiras{margin:44px 0 8px; display:grid; gap:14px}
.tira-carriers{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%)}
.tira-carriers .rueda{display:flex; width:max-content; gap:52px; align-items:center;
  animation:rueda-izq 42s linear infinite; will-change:transform}
.tira-carriers.derecha .rueda{animation-name:rueda-der}
.tira-carriers:hover .rueda{animation-play-state:paused}
.tira-carriers span{font-family:var(--titulo); font-size:clamp(19px,2vw,26px); font-weight:600; letter-spacing:-.02em;
  color:rgba(18,16,13,.30); white-space:nowrap; transition:color .3s ease}
.tira-carriers span:hover{color:var(--verde)}
@keyframes rueda-izq{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 26px))}}
@keyframes rueda-der{from{transform:translateX(calc(-50% - 26px))} to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.tira-carriers .rueda{animation:none}}

/* la cifra de fondo se queda detrás del titular sin pelearse con él */
.marca-agua{top:2%; color:rgba(0,138,78,.065)}
.bloque-carriers .tiras{margin-top:62px}
.bloque-carriers .estados{margin-top:52px}


/* ============================================================
   14 · EL MAPA DE COBERTURA

   Sustituye a la fila de siglas: los estados cubiertos en verde,
   los que no, en gris, y el nombre al pasar el ratón.
   ============================================================ */

.mapa-cobertura{position:relative; max-width:900px; margin:52px auto 0}
.mapa-cobertura svg{width:100%; height:auto; display:block; overflow:visible}
.mapa-cobertura .state path{fill:var(--verde); transition:fill .25s ease}
.mapa-cobertura .state path.fuera{fill:#cdd8d1}
.mapa-cobertura .state path:not(.fuera):hover{fill:var(--verde-hondo); cursor:default}
.mapa-cobertura .borders{stroke:rgba(255,255,255,.9); stroke-width:1}

.globo-estado{position:absolute; z-index:5; pointer-events:none; background:var(--tinta); color:#fff;
  font-size:13px; font-weight:600; padding:6px 11px; border-radius:8px; white-space:nowrap;
  transform:translate(-50%,-140%); opacity:0; transition:opacity .18s ease;
  box-shadow:0 6px 18px rgba(18,16,13,.18)}
.globo-estado.visible{opacity:1}
.globo-estado small{display:block; font-weight:400; opacity:.72; font-size:11.5px}

.leyenda-mapa{margin-top:26px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; font-size:14px; color:var(--tinta-suave)}
.leyenda-mapa span{display:inline-flex; align-items:center; gap:9px}
.leyenda-mapa i{width:13px;height:13px;border-radius:4px; background:var(--verde); display:block}
.leyenda-mapa i.fuera{background:#cdd8d1}

/* el punto de Washington DC va en el mismo verde que los estados */
.mapa-cobertura circle.dccircle{fill:var(--verde); stroke:#fff; stroke-width:1.4; transition:fill .25s ease}
.mapa-cobertura circle.dccircle:hover{fill:var(--verde-hondo)}


/* ------------------------------------------------------------
   La entrada del mapa: primero el país en gris, luego el logo
   aparece sobre Miami y el verde se expande desde ahí, estado a
   estado, según lo lejos que quede cada uno de ese punto.
   ------------------------------------------------------------ */
.mapa-cobertura .state path, .mapa-cobertura circle.dccircle{fill:#dde5e0; transition:fill .55s ease}
.mapa-cobertura.pintando .state path:not(.fuera), .mapa-cobertura.pintando circle.dccircle{fill:var(--verde)}
.mapa-cobertura .state path.fuera{fill:#cdd8d1}

.chispa-mapa{position:absolute; z-index:4; pointer-events:none; width:clamp(88px,11vw,132px); height:auto;
  left:89.5%; top:90%; transform:translate(-50%,-50%) scale(.45); opacity:0;
  transition:opacity .55s ease, transform .8s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 10px 26px rgba(5,48,29,.28))}
.mapa-cobertura.encendida .chispa-mapa{opacity:1; transform:translate(-50%,-50%) scale(1)}
.mapa-cobertura.apagando .chispa-mapa{opacity:0; transform:translate(-50%,-50%) scale(1.5)}

/* la onda que sale del mismo punto que el logo */
.onda-mapa{position:absolute; z-index:3; pointer-events:none; left:89.5%; top:90%; width:26px; height:26px;
  margin:-13px 0 0 -13px; border-radius:50%; border:2px solid rgba(0,138,78,.55); opacity:0}
.mapa-cobertura.pintando .onda-mapa{animation:onda-sale 1.9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes onda-sale{
  0%{opacity:.85; transform:scale(1)}
  100%{opacity:0; transform:scale(46)}}

@media(prefers-reduced-motion:reduce){
  .mapa-cobertura .state path:not(.fuera), .mapa-cobertura circle.dccircle{fill:var(--verde); transition:fill .25s ease}
  .chispa-mapa, .onda-mapa{display:none}
}

/* el logo de la marca, muy tenue, al fondo por la derecha */
.logo-fondo{position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:-6%; top:50%; transform:translateY(-50%); width:min(560px,46vw); height:auto; opacity:.055}
@media(max-width:900px){.logo-fondo{width:70vw; right:-18%; opacity:.045}}


/* ============================================================
   15 · LA MARCA CON NOMBRE

   El zorro verde y el nombre al lado, como en el material del
   cliente: el dibujo en verde y la palabra en negro.
   ============================================================ */

.marca{gap:11px}
.marca img{height:42px}
.marca .nombre-marca{font-family:var(--titulo); font-weight:700; letter-spacing:-.035em; color:var(--tinta);
  font-size:25px; line-height:1; white-space:nowrap; transition:color .25s ease}
.marca:hover .nombre-marca{color:var(--verde-hondo)}
.barra.bajada .marca img{height:34px}
.barra.bajada .marca .nombre-marca{font-size:22px}
@media(max-width:640px){
  .marca img{height:32px}
  .marca .nombre-marca{font-size:19px}
}

.pie-marca .marca-pie{display:flex; align-items:center; gap:12px}
.pie-marca .marca-pie img{height:48px; width:auto; display:block}
.pie-marca .marca-pie .nombre-marca{font-family:var(--titulo); font-weight:700; letter-spacing:-.035em;
  color:var(--tinta); font-size:27px; line-height:1}

/* la foto del hero, más alta y sin chafar, y con aire hasta la cinta de abajo */
.hero.wecare{padding-bottom:34px}
.hero.wecare .columna-texto{padding-bottom:74px}
.hero.wecare .retrato{height:clamp(460px,49vw,640px)}
.hero.wecare .retrato .hueco{border-radius:50% 50% 26px 26px / 26% 26% 26px 26px}
.hero.wecare .retrato .hueco img{object-position:center 18%}
.ficha-flota.abajo{bottom:52px}
@media(max-width:980px){.hero.wecare .retrato{height:clamp(360px,74vw,520px)}}

/* la ficha de las aseguradoras sube hasta el borde del arco: abajo tapaba la cara */
.ficha-flota.arriba{top:-14px; left:-34px}
@media(max-width:980px){.ficha-flota.arriba{top:8px; left:8px}}

/* ============================================================
   La barra en español: los textos son más largos y los enlaces
   partían en dos líneas dentro de su cápsula. Ningún texto de la
   barra parte, y se ajustan huecos y ancho para que quepa.
   ============================================================ */
.nav a, .idioma button, .barra .btn, .marca .nombre-marca{white-space:nowrap}
.nav{flex:none}
.barra.bajada .env{width:min(1140px,100% - 32px); gap:22px}
@media(max-width:1180px){
  .barra .env{gap:20px}
  .nav{gap:2px; font-size:14px}
  .nav a{padding:7px 10px}
}
@media(max-width:1040px){
  .marca .nombre-marca{display:none}
}

/* ============================================================
   La barra en movil: botones mas pequenos y menu lateral
   El boton de menu solo aparece cuando los enlaces se esconden.
   ============================================================ */
.abre-menu{display:none}
@media(max-width:900px){
  .barra .env, .barra.bajada .env{gap:8px}
  .barra.bajada .env{padding:0 8px 0 16px; height:56px}
  .nav{display:none}
  .idioma{margin-left:auto; padding:2px}
  .idioma button{font-size:12px; padding:4px 9px}
  .barra .btn{min-height:36px; padding:0 15px; font-size:13.5px}
  .abre-menu{display:inline-grid; place-items:center; flex:none; width:40px; height:40px; border:1px solid var(--linea);
    border-radius:99px; background:var(--papel); color:var(--tinta); cursor:pointer; padding:0; position:relative}
  /* el boton se ve de 40px pero se toca en 44px */
  .abre-menu::after{content:""; position:absolute; inset:-2px}
  .abre-menu svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
}
@media(max-width:380px){
  .barra .btn{padding:0 12px}
  .idioma button{padding:4px 7px}
}

.velo-menu{position:fixed; inset:0; z-index:80; background:rgba(5,48,29,.32); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s ease}
.menu-lateral{position:fixed; top:0; right:0; bottom:0; z-index:81; width:min(340px,86vw); height:100dvh;
  background:var(--papel); box-shadow:-20px 0 60px rgba(18,16,13,.16); border-radius:24px 0 0 24px;
  display:flex; flex-direction:column; padding:max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  transform:translateX(104%); transition:transform .32s cubic-bezier(.2,.7,.3,1)}
html.menu-abierto .velo-menu{opacity:1}
html.menu-abierto .menu-lateral{transform:none; transition-duration:.42s}
html.menu-abierto body{overflow:hidden}

.menu-cabecera{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--linea)}
.menu-cabecera .marca img{height:32px}
.menu-cabecera .marca .nombre-marca{display:inline; font-size:19px}
.cierra-menu{width:44px; height:44px; border:0; border-radius:99px; background:var(--verde-claro); color:var(--verde); cursor:pointer;
  display:grid; place-items:center; padding:0}
.cierra-menu svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.menu-enlaces{display:flex; flex-direction:column; gap:4px; padding:18px 0; overflow-y:auto}
.menu-enlaces a{display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:14px; text-decoration:none;
  font-family:var(--titulo); font-size:18px; font-weight:600; color:var(--tinta); transition:background .2s ease, color .2s ease}
.menu-enlaces a:hover, .menu-enlaces a.activo{background:var(--verde-claro); color:var(--verde)}
.menu-pie{margin-top:auto; padding-top:16px; border-top:1px solid var(--linea)}
.menu-pie .btn{width:100%; min-height:48px}

@media(prefers-reduced-motion:reduce){
  .velo-menu, .menu-lateral{transition:none}
}

/* el panel pone display:flex y eso anulaba el hidden: se quedaba pintado
   fuera de la pantalla, a la derecha, y abria scroll lateral */
.menu-lateral[hidden], .velo-menu[hidden]{display:none}

/* ============================================================
   El nombre junto al logo tambien en movil, con la barra bajada
   Entre 901 y 1040px sigue escondido (ahi no cabe con los enlaces);
   en movil los enlaces van al menu y el nombre vuelve. Para que quepa
   todo en la capsula se aprietan logo, huecos y botones.
   ============================================================ */
@media(max-width:900px){
  .marca{gap:7px}
  .marca .nombre-marca, .barra.bajada .marca .nombre-marca{display:inline; font-size:16px}
  .marca img, .barra.bajada .marca img{height:30px}
  .barra .env, .barra.bajada .env{gap:6px}
  .idioma button{padding:4px 7px}
  .barra .btn{padding:0 12px}
  .abre-menu{width:38px; height:38px}
  .abre-menu::after{inset:-3px}
}
/* en los moviles mas estrechos el boton de entrar sale de la barra: ya esta
   abajo del menu lateral, y con el nombre puesto no cabe todo */
@media(max-width:370px){
  .barra .btn{display:none}
}

/* ============================================================
   Redes sociales: fila de iconos en el hero y iconos en el pie
   ============================================================ */
.redes{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.redes a{width:40px; height:40px; border-radius:99px; display:grid; place-items:center; position:relative;
  background:var(--papel); border:1px solid var(--linea); color:var(--tinta);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1)}
.redes a::after{content:""; position:absolute; inset:-2px}
.redes a:hover{background:var(--verde); border-color:var(--verde); color:#fff; transform:translateY(-2px)}
.redes svg, .pie-columna .con-icono svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.redes svg .lleno, .pie-columna .con-icono svg .lleno{fill:currentColor}
.redes-hero{margin-top:22px}
.hero-doble .redes-hero{margin-top:26px}

.pie-columna .con-icono{display:inline-flex; align-items:center; gap:10px}
.pie-columna .con-icono svg{flex:none; color:var(--verde)}

/* ============================================================
   Hero centrado en movil (cuando las columnas se apilan)
   ============================================================ */
@media(max-width:980px){
  .hero.wecare .columna-texto{text-align:center}
  .hero.wecare .entradilla{margin-inline:auto}
  .hero.wecare .acciones, .hero.wecare .prueba-social, .hero.wecare .redes-hero, .hero.wecare .tira-logos{justify-content:center}
  .hero.wecare .prueba-social{text-align:left}
}
@media(max-width:900px){
  .hero-doble .env > div:first-child{text-align:center}
  .hero-doble .entradilla{margin-inline:auto}
  .hero-doble .acciones, .hero-doble .apoyo, .hero-doble .redes-hero{justify-content:center}
}

/* con Nosotros la barra lleva seis enlaces: el modo apretado entra antes */
@media(max-width:1320px){
  .barra .env{gap:18px}
  .nav{gap:2px; font-size:14px}
  .nav a{padding:7px 10px}
  .barra.bajada .env{gap:16px}
}
@media(max-width:1120px){
  .marca .nombre-marca{display:none}
}
@media(max-width:900px){
  .marca .nombre-marca, .barra.bajada .marca .nombre-marca{display:inline}
}