/* =========================================================
   SEGUROS WILLISCH — SUBPÁGINAS DE PRODUCTO
   Se carga después de site.css y solo en /seguros/<producto>/.
   ========================================================= */

/* ============ 0. FONDO AMBIENTE ============
   El mismo degradado suave de la portada, ahora detrás de todo el sitio.
   Va en una capa fija, así que no se mueve al bajar y no cuesta repintarlo.
   Para que se vea, las franjas y las tarjetas son translúcidas. */
html{background:var(--bg)}
body{background:transparent}
body::before{
  content:"";
  position:fixed;inset:-18vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 16% 10%, color-mix(in srgb,var(--blue) 30%,transparent), transparent 68%),
    radial-gradient(34% 30% at 86% 24%, color-mix(in srgb,var(--warm) 27%,transparent), transparent 68%),
    radial-gradient(40% 34% at 72% 78%, color-mix(in srgb,var(--blue-light) 30%,transparent), transparent 70%),
    radial-gradient(34% 30% at 24% 88%, color-mix(in srgb,var(--blue) 22%,transparent), transparent 70%);
  animation:fondo-vivo 42s var(--ease) infinite alternate;
}
@keyframes fondo-vivo{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-2.2%,1.8%,0) scale(1.07)}
}

/* La portada ya trae su propio resplandor encima: aquí solo se quita el
   color sólido para que el fondo ambiente se vea a través. */
.hero{background:transparent}

/* Franja de sección: antes era un color sólido que tapaba el fondo. */
.franja{
  background:color-mix(in srgb,var(--bg-alt) 62%,transparent);
  border-block:1px solid var(--border);
}

/* ============ 0b. SEGUROS 100% DIGITALES ============
   La sección más llamativa del inicio: tres tarjetas con anillo de luz
   giratorio, iconos que se dibujan al aparecer y auroras de fondo. */
.digi{
  position:relative;overflow:clip;
  padding-block:clamp(72px,10vw,124px);
  border-block:1px solid var(--border);
}

/* -- Auroras -- */
.digi-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.digi-aurora .au{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.82;
}
.au-1{
  width:46vw;height:46vw;min-width:320px;min-height:320px;top:-14%;left:-8%;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 52%,transparent),transparent 70%);
  animation:aurora-a 26s var(--ease) infinite alternate;
}
.au-2{
  width:38vw;height:38vw;min-width:260px;min-height:260px;top:12%;right:-10%;
  background:radial-gradient(circle,color-mix(in srgb,var(--warm) 46%,transparent),transparent 70%);
  animation:aurora-b 31s var(--ease) infinite alternate;
}
.au-3{
  width:42vw;height:42vw;min-width:280px;min-height:280px;bottom:-20%;left:32%;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue-light) 50%,transparent),transparent 70%);
  animation:aurora-c 37s var(--ease) infinite alternate;
}
@keyframes aurora-a{to{transform:translate3d(14%,10%,0) scale(1.18)}}
@keyframes aurora-b{to{transform:translate3d(-12%,16%,0) scale(1.12)}}
@keyframes aurora-c{to{transform:translate3d(10%,-14%,0) scale(1.2)}}

.digi .container{position:relative;z-index:2}

/* -- Etiqueta con punto que late -- */
.kicker-vivo{display:inline-flex;align-items:center;gap:9px}
.kicker-vivo i{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#25D366;
  animation:latir 2.4s ease-out infinite;
}
@keyframes latir{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.65)}
  70%{box-shadow:0 0 0 11px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* -- Los tres pasos -- */
.digi-pasos{
  display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
  margin:38px auto 0;max-width:720px;
}
.digi-pasos li{
  display:flex;align-items:center;gap:11px;
  padding:0 clamp(12px,2.4vw,26px);
  font-size:14px;font-weight:600;color:var(--text-soft);
}
.digi-pasos li + li{border-left:1px solid var(--border)}
.digi-pasos b{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--blue);color:#fff;
  font-family:var(--font-display);font-size:13.4px;font-weight:800;
}
@media (max-width:560px){
  .digi-pasos{flex-direction:column;align-items:flex-start;gap:14px;max-width:300px}
  .digi-pasos li{padding:0}
  .digi-pasos li + li{border-left:0}
}

/* -- Las tres tarjetas -- */
.digi-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:52px}
@media (min-width:860px){ .digi-grid{grid-template-columns:repeat(3,1fr);gap:22px} }

.digi-card{position:relative;border-radius:var(--r-lg)}

/* Anillo de luz que gira al pasar el cursor */
@property --giro{syntax:"<angle>";initial-value:0deg;inherits:false}
.digi-anillo{
  position:absolute;inset:-1.5px;border-radius:inherit;z-index:0;
  background:conic-gradient(from var(--giro),
    transparent 0deg,
    color-mix(in srgb,var(--blue) 90%,transparent) 55deg,
    color-mix(in srgb,var(--blue-light) 90%,transparent) 105deg,
    color-mix(in srgb,var(--warm) 85%,transparent) 150deg,
    transparent 210deg);
  opacity:0;transition:opacity .45s ease;
  animation:girar-anillo 5s linear infinite;
}
@keyframes girar-anillo{to{--giro:360deg}}
.digi-card:hover .digi-anillo,
.digi-card:focus-within .digi-anillo{opacity:1}

.digi-inner{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;
  padding:34px 28px 30px;border-radius:inherit;
  background:color-mix(in srgb,var(--surface) 84%,transparent);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid var(--border);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.digi-card:hover .digi-inner,
.digi-card:focus-within .digi-inner{
  transform:translateY(-8px);
  box-shadow:0 30px 60px -28px color-mix(in srgb,var(--blue) 55%,transparent);
}
@supports not (backdrop-filter:blur(2px)){ .digi-inner{background:var(--surface)} }

.digi-num{
  position:absolute;top:22px;right:26px;
  font-family:var(--font-display);font-weight:800;font-size:13px;
  letter-spacing:.1em;color:var(--text-mute);opacity:.7;
}

/* Icono: se dibuja solo cuando la tarjeta entra en pantalla */
.digi-ic{
  width:76px;height:76px;margin-bottom:24px;
  display:grid;place-items:center;border-radius:22px;
  background:color-mix(in srgb,var(--blue) 10%,transparent);
  color:var(--blue);
}
.digi-ic svg{width:44px;height:44px;overflow:visible}
.digi-ic .tr,.digi-ic .av{stroke-dasharray:280;stroke-dashoffset:280}
.digi-card.in .digi-ic .tr{animation:trazar 1.5s var(--ease-out) forwards}
.digi-card.in .digi-ic .tr:nth-of-type(2){animation-delay:.12s}
.digi-card.in .digi-ic .tr:nth-of-type(3){animation-delay:.24s}
.digi-card.in .digi-ic .tr:nth-of-type(4){animation-delay:.36s}
@keyframes trazar{to{stroke-dashoffset:0}}
/* El avión, además, se desliza al entrar */
.digi-card.in .digi-ic .av{animation:trazar 1.2s var(--ease-out) .5s forwards, volar 1.2s var(--ease-out) .5s forwards}
@keyframes volar{from{transform:translate(-8px,8px)}to{transform:none}}
.no-js .digi-ic .tr,.no-js .digi-ic .av{stroke-dashoffset:0}

.digi-inner h3{font-size:1.24rem;letter-spacing:-.025em}
.digi-inner > p{margin-top:12px;font-size:14.4px;line-height:1.66;color:var(--text-soft)}

.digi-puntos{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.digi-puntos li{
  font-size:11.8px;font-weight:700;padding:6px 12px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--blue) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);
  color:var(--text-soft);
}

.digi-cta{margin-top:auto;padding-top:28px;display:grid;gap:12px;justify-items:center}
.digi-mas{
  font-size:13.4px;font-weight:700;color:var(--blue);
  border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.digi-mas:hover{border-bottom-color:currentColor}

.digi-pie{
  margin-top:46px;text-align:center;
  font-size:14.4px;color:var(--text-soft);
}
.digi-pie a{color:var(--blue);font-weight:700;cursor:pointer}
.digi-pie a:hover{text-decoration:underline}

/* Windows trae el ahorro de movimiento activado de fábrica: no se apaga
   todo, se baja el ritmo para que la página siga viva pero tranquila. */
@media (prefers-reduced-motion:reduce){
  body::before{animation-duration:120s}
  .digi-aurora .au{animation-duration:90s}
  .digi-anillo{animation-duration:14s}
  .digi-card.in .digi-ic .tr{animation-duration:.8s}
  .digi-card.in .digi-ic .av{animation:trazar .8s var(--ease-out) .3s forwards}
  .kicker-vivo i{animation-duration:4.5s}
  .digi-card:hover .digi-inner,.digi-card:focus-within .digi-inner{transform:none}
}

/* ============ 1. HUECO DE FOTO ============
   Reserva el espacio de una imagen que todavía no llega, con la
   proporción final. Cuando tengas la foto, cambia el bloque .ph por:
     <img src="/assets/img/productos/NOMBRE.webp" alt="..." width="..." height="...">
   El atributo data-img de cada hueco ya dice qué archivo va ahí. */
.ph{
  position:relative;
  aspect-ratio:var(--ph-ratio,16/10);
  border-radius:var(--r);
  border:1.5px dashed color-mix(in srgb,var(--blue) 30%,transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--blue) 7%,transparent),
      color-mix(in srgb,var(--blue-light) 9%,transparent));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;text-align:center;overflow:hidden;
}
.ph-mark{
  width:46px;height:46px;flex:none;
  color:color-mix(in srgb,var(--blue) 42%,transparent);
}
.ph-txt{
  font-size:12.6px;line-height:1.45;font-weight:600;
  color:var(--text-mute);max-width:26ch;
}
.ph-hero{aspect-ratio:var(--ph-ratio,16/10)}
.ph-foto{
  display:block;width:100%;height:auto;aspect-ratio:var(--ph-ratio,16/10);
  object-fit:cover;border-radius:var(--r);background:var(--bg-alt);
}
@media (max-width:760px){
  .ph-mark{width:38px;height:38px}
  .ph-txt{font-size:11.8px}
}

/* ============ 2. PORTADA DEL PRODUCTO ============ */
.prod-hero{padding-block:calc(var(--h-header) + 34px) 62px}
@media (min-width:900px){ .prod-hero{padding-block:calc(var(--h-header) + 52px) 84px} }

.miga{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.8px;color:var(--text-mute);margin-bottom:28px;
}
.miga a{color:var(--text-soft);text-decoration:none}
.miga a:hover{color:var(--blue);text-decoration:underline}
.miga b{color:var(--text);font-weight:700}
.miga span{opacity:.5}

.prod-hero-grid{display:grid;gap:38px;grid-template-columns:1fr;align-items:center}
@media (min-width:940px){
  .prod-hero-grid{grid-template-columns:1.05fr .95fr;gap:58px}
}
.prod-hero-txt h1{margin-top:14px}
.prod-hero-txt .lead{margin-top:20px;max-width:56ch}

.prod-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.prod-cta.center-cta{justify-content:center}

.prod-nota{
  margin-top:22px;padding:14px 18px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--blue-light) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--blue-light) 30%,transparent);
  font-size:13.4px;line-height:1.6;color:var(--text-soft);max-width:54ch;
}
.prod-nota b{color:var(--text)}

/* ============ 3. COBERTURAS ============ */
.cob-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px}
@media (min-width:660px){ .cob-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .cob-grid{grid-template-columns:repeat(4,1fr);gap:18px} }

.cob-card{
  position:relative;padding:26px 24px 28px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.cob-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.cob-num{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:13px;letter-spacing:.08em;color:var(--warm);margin-bottom:14px;
}
.cob-card h3{font-size:1.04rem;letter-spacing:-.02em}
.cob-card p{margin-top:10px;font-size:13.8px;line-height:1.65;color:var(--text-soft)}

/* ============ 4. QUÉ HACEMOS POR TI ============ */
.inc-grid{display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media (min-width:940px){ .inc-grid{grid-template-columns:1.1fr .9fr;gap:60px} }

.inc-lista{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.inc-lista li{
  display:flex;gap:13px;align-items:flex-start;
  font-size:15px;line-height:1.62;color:var(--text-soft);
}
.inc-lista svg{
  width:20px;height:20px;flex:none;margin-top:3px;color:var(--blue);
}

/* ============ 5. RELACIONADOS ============ */
.rel-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:36px}
@media (min-width:640px){ .rel-grid{grid-template-columns:repeat(3,1fr);gap:16px} }

.rel-card{
  display:flex;flex-direction:column;gap:8px;
  padding:24px 22px 22px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:transform .35s var(--ease-out),border-color .35s ease,box-shadow .35s var(--ease-out);
}
.rel-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:var(--shadow-sm)}
.rel-cat{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-mute);
}
.rel-card h3{font-size:1.02rem;letter-spacing:-.02em}
.rel-go{margin-top:auto;padding-top:10px;font-size:13.4px;font-weight:700;color:var(--blue)}
.rel-todos{margin-top:30px;font-size:14.4px;font-weight:700}
.rel-todos a{color:var(--blue);text-decoration:none}
.rel-todos a:hover{text-decoration:underline}

/* ============ 6. CIERRE ============ */
.cierre{
  background:color-mix(in srgb,var(--bg-alt) 62%,transparent);
  border-top:1px solid var(--border);
}
.cierre .lead{margin-top:16px;margin-inline:auto;max-width:52ch}

/* ============ 7. MENÚ DE CATÁLOGO ============
   Tres grupos arriba (Personas, Empresas, Colectivos). Al abrir uno, a la
   izquierda salen sus subgrupos y a la derecha los seguros del subgrupo
   que esté señalado. */
.mega-dos{
  display:grid;grid-template-columns:auto 1fr;gap:0;
  min-width:min(620px,86vw);padding:0;overflow:hidden;
}

.mega-subs{
  display:flex;flex-direction:column;gap:2px;padding:14px 12px;
  background:var(--bg-alt);border-right:1px solid var(--border);
  min-width:212px;
}
.mega-sub{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:11px 14px;border:0;border-radius:var(--r-sm);
  background:none;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:14.2px;
  letter-spacing:-.01em;color:var(--text-soft);
  transition:background .22s ease,color .22s ease;
}
.mega-sub svg{width:15px;height:15px;flex:none;opacity:0;transition:opacity .22s ease}
.mega-sub:hover{color:var(--text)}
.mega-sub[aria-selected="true"]{background:var(--blue);color:#fff}
.mega-sub[aria-selected="true"] svg{opacity:.85}

.mega-prods{padding:16px 18px}
.mega-panel{display:flex;flex-direction:column;gap:1px}
.mega-panel[hidden]{display:none}
.mega-panel a{
  display:block;padding:9px 12px;border-radius:var(--r-sm);
  font-size:14.2px;font-weight:600;color:var(--text-soft);text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.mega-panel a:hover{background:var(--bg-alt);color:var(--blue)}

.mega-tag{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--r-full);
  font-size:9.6px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warm);background:color-mix(in srgb,var(--warm) 15%,transparent);
  vertical-align:middle;
}

/* En pantallas medianas el panel se estrecha para no salirse */
@media (max-width:1080px){
  .mega-dos{min-width:min(560px,90vw)}
  .mega-subs{min-width:184px}
}

/* ---- Menú móvil: grupo plegable con sus subgrupos dentro ---- */
.m-grupo{border-bottom:1px solid var(--border)}
.m-grupo>summary{
  list-style:none;cursor:pointer;padding:16px 2px;
  font-family:var(--font-display);font-weight:800;font-size:17px;
  color:var(--text);display:flex;align-items:center;justify-content:space-between;
}
.m-grupo>summary::-webkit-details-marker{display:none}
.m-grupo>summary::after{
  content:"";width:9px;height:9px;flex:none;margin-left:12px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .25s var(--ease-out);opacity:.55;
}
.m-grupo[open]>summary::after{transform:rotate(-135deg)}
.m-sub{
  margin:14px 0 4px;padding-left:2px;
  font-family:var(--font-display);font-weight:800;font-size:11.4px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);
}
.m-menu .m-grupo a.m-link{
  border:0;padding:9px 2px 9px 14px;font-size:14.6px;font-weight:600;
  color:var(--text-soft);
}
.m-grupo>*:last-child{margin-bottom:14px}

/* ============ 8. AJUSTES COMPARTIDOS ============ */
.container-angosto{max-width:820px}
.f-grid-ancha{grid-template-columns:1fr}
@media (min-width:760px){ .f-grid-ancha{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .f-grid-ancha{grid-template-columns:1.4fr repeat(4,1fr)} }

/* =========================================================
   INICIO — las tres secciones
   (vive aquí porque el inicio y las páginas de producto
    comparten los mismos componentes)
   ========================================================= */

/* ============ 9. CIFRAS DENTRO DE LA PORTADA ============ */
.hero-cifras{margin-top:56px;padding-top:40px;border-top:1px solid var(--border)}
@media (max-width:760px){ .hero-cifras{margin-top:40px;padding-top:30px} }

/* ============ 11. POR QUÉ CON NOSOTROS ============ */
.por-que-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:48px}
@media (min-width:660px){ .por-que-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .por-que-grid{grid-template-columns:repeat(4,1fr);gap:18px} }

.pq-card{
  padding:28px 24px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
}
.pq-foto{
  display:block;width:calc(100% + 48px);height:auto;max-width:none;margin:-28px -24px 22px;
  aspect-ratio:16/10;object-fit:cover;border-radius:var(--r) var(--r) 0 0;
}
.pq-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;margin-bottom:18px;
  background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--blue);
}
.pq-ic svg{width:23px;height:23px}
.pq-card h3{font-size:1.04rem;letter-spacing:-.02em}
.pq-card p{margin-top:10px;font-size:13.8px;line-height:1.65;color:var(--text-soft)}

/* ============ 12. EQUIPO ============ */
.equipo-grid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:44px}
@media (min-width:640px){ .equipo-grid{grid-template-columns:repeat(3,1fr);gap:20px} }

.eq-card h3{margin-top:18px;font-size:1.06rem;letter-spacing:-.02em}
.eq-card p{margin-top:8px;font-size:13.8px;line-height:1.65;color:var(--text-soft)}

/* ============ 13. CONTACTO ============ */
.contacto-bloque{
  margin-top:78px;padding:40px 32px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  display:grid;gap:36px;grid-template-columns:1fr;align-items:center;
}
@media (min-width:900px){
  .contacto-bloque{grid-template-columns:1.1fr .9fr;gap:56px;padding:52px 48px}
}
.cont-txt .lead{margin-top:14px;max-width:46ch}
.cont-txt h2{margin-top:12px}

.cont-datos{display:grid;gap:16px}
.cont-datos li{display:flex;gap:14px;align-items:flex-start}
.cont-datos svg{width:21px;height:21px;flex:none;margin-top:3px;color:var(--blue)}
.cont-datos b{
  display:block;font-family:var(--font-display);font-size:12.4px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);
}
.cont-datos span{display:block;margin-top:2px;font-size:14.6px;color:var(--text-soft)}
/* El botón fantasma nació para fondos oscuros; en la tarjeta clara de contacto
   era blanco sobre blanco y no se veía */
.contacto-bloque .btn-ghost{
  background:transparent;color:var(--blue);
  border-color:color-mix(in srgb,var(--blue) 40%,transparent);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.contacto-bloque .btn-ghost:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}
/* WhatsApp, correo y oficina son botones: toda la tarjeta se puede tocar */
.cont-datos li.cd-info{padding:4px 16px}
.cd-btn{
  display:flex;gap:14px;align-items:flex-start;width:100%;padding:14px 16px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:inherit;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cd-btn:hover,.cd-btn:focus-visible{
  border-color:color-mix(in srgb,var(--blue) 45%,transparent);
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--blue) 55%,transparent);
  transform:translateY(-2px);
}
.cd-btn > div{flex:1;min-width:0}
.cd-btn span{overflow-wrap:anywhere}
.cd-btn em{
  display:inline-block;margin-top:6px;font-style:normal;font-family:var(--font-display);
  font-weight:700;font-size:13px;color:var(--blue);
}
.cd-ir{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue);align-self:center}
.cd-ir svg{width:15px;height:15px;margin:0}

/* ============ 14. AJUSTES DE ALTURA EN MÓVIL ============
   En el teléfono el pie con las siete categorías y las fotos verticales
   del equipo alargaban mucho la página. Aquí se compactan. */
@media (max-width:759px){
  /* El pie pasa a dos columnas en vez de una sola lista larguísima */
  .f-grid-ancha{grid-template-columns:repeat(2,1fr);gap:26px 20px}
  .f-grid-ancha .f-brand{grid-column:1 / -1}
  .f-grid-ancha .f-contact{grid-column:1 / -1}
  .f-grid-ancha .f-col h4{margin-bottom:8px;font-size:12.6px}
  .f-grid-ancha .f-col a{padding-block:4px;font-size:13.2px}

  /* El retrato del equipo se vuelve apaisado para no ocupar media pantalla */
  .eq-card .ph{--ph-ratio:16/10 !important}
  /* En celular el retrato se recorta a 16/10 para no alargar la página. El
     encuadre se sube al 25%: centrado cortaba la cara, que en un retrato de
     medio cuerpo cae entre el 15% y el 35% de la altura. */
  .eq-foto img{aspect-ratio:16/10;object-position:50% 25%}
  .equipo-grid{gap:22px}
}

/* ============ 15. VIDRIO ESMERILADO ============
   Va al final a propósito: tiene que ganarle al color sólido que cada
   tarjeta declara más arriba, para que el fondo ambiente se vea a través. */
/* Las tarjetas quedan de vidrio esmerilado sobre el fondo. */
.cob-card,.pq-card,.rel-card,.contacto-bloque,.faq-item{
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.mega,.m-menu{
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
.mega-subs{background:color-mix(in srgb,var(--bg-alt) 70%,transparent)}

/* Si el navegador no sabe de backdrop-filter, vuelven a ser opacas. */
@supports not (backdrop-filter:blur(2px)){
  .cob-card,.pq-card,.rel-card,.contacto-bloque,.faq-item,.mega,.m-menu{background:var(--surface)}
  .franja,.mega-subs{background:var(--bg-alt)}
}

/* =========================================================
   16. AJUSTES DE ESTA TANDA
   ========================================================= */

/* ---- El punto de los títulos ----
   Plus Jakarta Sans deja casi 4 px de aire a la izquierda del punto en los
   tamaños grandes y se lee como un espacio. El JS envuelve cada punto de los
   títulos en .pt y aquí se lo recuperamos. */
.pt{margin-left:-.13em}

/* ---- Palabra rotativa, con mucho más peso (Bloque 2) ---- */
.rotator-grande{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:30px;
  /* La mitad del titular del hero, que llega a 3rem. */
  font-size:clamp(1.25rem,2.9vw,2rem);
  letter-spacing:-.02em;
}
.rotator-grande .rotator-label{
  font-size:.52em;font-weight:700;color:var(--text-mute);
  letter-spacing:.02em;
}
.rotator-grande .rotator-mask{
  height:1.28em;min-width:9ch;overflow:hidden;
}
.rotator-grande .rotator-mask b{
  position:relative;color:var(--warm);font-weight:800;
  padding-bottom:.1em;
}
/* Subrayado que se dibuja con cada palabra nueva */
.rotator-grande .rotator-mask b::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:.09em;
  border-radius:99px;background:currentColor;opacity:.35;
  transform:scaleX(0);transform-origin:left;
  animation:subrayar .7s var(--ease-out) .18s forwards;
}
@keyframes subrayar{to{transform:scaleX(1)}}
/* Entrada por deslizamiento lateral, no vertical */
.rotator-grande .rotator-mask b.entra{animation:rotarEntraLado .5s var(--ease-out)}
.rotator-grande .rotator-mask b.out{transform:translateX(-24%);opacity:0}
@keyframes rotarEntraLado{from{transform:translateX(26%);opacity:0}to{transform:none;opacity:1}}

/* ---- Selector "¿Qué quieres asegurar?" (Bloque 2.4) ---- */
.selector{
  padding:30px 26px 26px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--border);box-shadow:var(--shadow);
}
@supports not (backdrop-filter:blur(2px)){ .selector{background:var(--surface)} }
.sel-titulo{
  font-size:1.14rem;letter-spacing:-.02em;margin-bottom:20px;text-align:center;
}
.sel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){ .sel-grid{grid-template-columns:repeat(2,1fr)} }

.sel-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:16px 8px 14px;min-height:96px;
  border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--bg-alt);text-align:center;
  transition:transform .3s var(--ease-out),border-color .3s ease,box-shadow .3s var(--ease-out),background .3s ease;
}
.sel-ic{
  display:grid;place-items:center;width:38px;height:38px;color:var(--blue);
  transition:transform .35s var(--ease-out);
}
.sel-ic svg{width:100%;height:100%}
.sel-txt{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:-.01em}
.sel-btn:hover,.sel-btn:focus-visible{
  transform:translateY(-4px);border-color:var(--blue);
  box-shadow:0 16px 30px -18px color-mix(in srgb,var(--blue) 60%,transparent);
}
.sel-btn:hover .sel-ic,.sel-btn:focus-visible .sel-ic{transform:scale(1.14) rotate(-4deg)}
/* La palabra que está rotando resalta su botón */
.sel-btn.activo{
  border-color:color-mix(in srgb,var(--warm) 60%,transparent);
  background:color-mix(in srgb,var(--warm) 9%,var(--bg-alt));
}
.sel-btn.activo .sel-ic{color:var(--warm)}
.sel-pie{margin-top:16px;text-align:center;font-size:12.4px;color:var(--text-mute)}

/* ---- Fila de confianza (Bloque 2.6) ---- */
.confia{
  display:grid;grid-template-columns:1fr;gap:14px;
  margin-top:52px;padding-top:36px;border-top:1px solid var(--border);
}
@media (min-width:620px){ .confia{grid-template-columns:repeat(2,1fr);gap:18px 30px} }
@media (min-width:1040px){ .confia{grid-template-columns:repeat(4,1fr)} }
.confia li{display:flex;align-items:center;gap:12px;font-size:14.4px;font-weight:600;color:var(--text-soft)}
.confia svg{width:26px;height:26px;flex:none;color:var(--blue)}

/* ---- Carrusel de aseguradoras (Bloque 2.7) ----
   Todos los logos ocupan la misma caja, así que se ven del mismo tamaño
   aunque los archivos tengan proporciones distintas. */
.mq-item{height:auto;min-width:0;width:170px}
.mq-item img{
  height:48px;width:170px;max-height:none;max-width:none;object-fit:contain;
}
@media (max-width:620px){
  .mq-item{width:132px}
  .mq-item img{height:38px;width:132px}
}

/* ---- Nosotros: se lee más grande en celular (Bloque 4.1) ---- */
.pq-card{padding:30px 26px}
.pq-foto{width:calc(100% + 52px);margin:-30px -26px 22px}
.pq-card h3{font-size:1.14rem}
.pq-card p{font-size:15.4px;line-height:1.68}
@media (min-width:1060px){ .pq-card p{font-size:14.8px} }

/* ---- Equipo: una tarjeta por persona (Bloque 4.2 y 4.3) ---- */
.eq-foto{position:relative;border-radius:var(--r);overflow:hidden}
.eq-foto img{
  width:100%;height:auto;display:block;
  aspect-ratio:3/4;object-fit:cover;object-position:50% 28%;
}
.eq-hover{
  position:absolute;inset:auto 0 0 0;padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  background:linear-gradient(to top,rgba(11,31,51,.94),rgba(11,31,51,.72) 62%,transparent);
  color:#fff;opacity:0;transform:translateY(12px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.eq-card:hover .eq-hover,
.eq-card:focus-within .eq-hover,
.eq-card:focus .eq-hover{opacity:1;transform:none}
.eq-hover b{font-family:var(--font-display);font-size:15.4px}
.eq-hover span{font-size:12.6px;opacity:.82}
.eq-wa{
  margin-top:10px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-full);
  background:var(--wa,#25D366);color:#06331a;
  font-family:var(--font-display);font-weight:800;font-size:12.6px;
}
.eq-wa svg{width:15px;height:15px}
.eq-wa:hover{filter:brightness(1.07)}
/* En táctil no hay hover: la capa se muestra siempre, más discreta */
@media (hover:none){
  .eq-hover{opacity:1;transform:none;background:linear-gradient(to top,rgba(11,31,51,.92),transparent)}
}
.eq-cargo{
  margin-top:2px;font-family:var(--font-display);font-weight:700;font-size:12.6px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);
}
/* Mientras no hay nombres, el cargo va justo debajo de la foto */
.eq-card .eq-foto + .eq-cargo{margin-top:18px}
.eq-card .eq-lema{margin-top:6px;font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--text)}
.eq-card h3{margin-top:16px;font-size:1.1rem}
.eq-card > p:last-child{font-size:14.6px;line-height:1.66}
.eq-instagram{margin-top:34px;text-align:center;font-size:14.8px;color:var(--text-soft)}
.eq-instagram a{color:var(--blue);font-weight:700;border-bottom:1px solid transparent}
.eq-instagram a:hover{border-bottom-color:currentColor}

/* ---- Cotizador rápido (Bloque 6.1) ---- */
.cot{padding-block:clamp(48px,7vw,86px)}
.cot-grid{display:grid;gap:26px;grid-template-columns:1fr;align-items:start}
@media (min-width:940px){ .cot-grid{grid-template-columns:1.02fr .98fr;gap:44px} }

.cot-ficha{
  padding:32px 28px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--border);
}
@supports not (backdrop-filter:blur(2px)){ .cot-ficha{background:var(--surface)} }
.cot-ficha h2{margin-top:12px}
.cot-frase{margin-top:14px;font-size:16.4px;line-height:1.6;color:var(--text-soft)}
.cot-gancho{
  margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--warm) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--warm) 38%,transparent);
  font-size:14px;line-height:1.55;
}
.cot-ben{display:flex;flex-direction:column;gap:13px;margin-top:24px}
.cot-ben li{display:flex;gap:12px;align-items:flex-start;font-size:14.8px;line-height:1.6;color:var(--text-soft)}
.cot-ben svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--blue)}
.cot-ideal{margin-top:22px;font-size:14px;color:var(--text-soft)}
.cot-ideal b{color:var(--text)}
.cot-tener{margin-top:20px;padding:16px 18px;border-radius:var(--r-sm);background:var(--bg-alt);border:1px solid var(--border)}
.cot-tener b{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute)}
.cot-tener ul{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.cot-tener li{font-size:14px;color:var(--text-soft);padding-left:16px;position:relative}
.cot-tener li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.cot-comparamos{
  display:flex;gap:11px;align-items:flex-start;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--border);font-size:13.6px;color:var(--text-mute);
}
.cot-comparamos svg{width:18px;height:18px;flex:none;margin-top:2px}

.cot-form{
  padding:32px 28px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
}
.cot-form h3{font-size:1.24rem}
.cot-hint{margin-top:8px;font-size:13.6px;color:var(--text-mute)}
.cot-form .field{margin-top:18px}
.cot-form label{display:block;font-size:13.2px;font-weight:600;color:var(--text-soft);margin-bottom:7px}
.cot-form input,.cot-form select{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg-alt);color:var(--text);
  font-family:var(--font-body);font-size:15px;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.cot-form input:focus,.cot-form select:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 13%,transparent);
}
.cot-form input.mal,.cot-form select.mal{border-color:#D6453B;background:color-mix(in srgb,#D6453B 6%,var(--bg-alt))}
.field-error{margin-top:6px;font-size:12.6px;font-weight:600;color:#C63A31}
.cot-check{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:13.8px;color:var(--text-soft);cursor:pointer}
.cot-check input{width:auto;margin-top:3px;flex:none}
.cot-form .btn{margin-top:24px}
.cot-asesor{
  display:block;margin-top:16px;text-align:center;
  font-size:13.8px;font-weight:700;color:var(--blue);cursor:pointer;
}
.cot-asesor:hover{text-decoration:underline}
.cot-legal{margin-top:16px;font-size:11.8px;line-height:1.6;color:var(--text-mute);text-align:center}
.cot-legal a{text-decoration:underline}

/* ---- Seguros 100% digitales: sin formulario, directo al cotizador ----
   Arrendamiento, mascotas y viaje se compran en el portal de la aseguradora.
   El botón lleva un brillo que lo cruza y una flecha que empuja hacia afuera,
   para que sea lo primero que se mire. */
.btn-online{position:relative;overflow:hidden;isolation:isolate}
.btn-online::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%) no-repeat;
  background-size:240% 100%;background-position:160% 0;
  animation:btnBrillo 3.6s ease-in-out 1.2s infinite;
}
.btn-online svg{transition:transform .3s var(--ease)}
.btn-online:hover svg{transform:translateX(4px)}
@keyframes btnBrillo{0%,55%{background-position:160% 0}100%{background-position:-60% 0}}
.btn-grande{padding:18px 32px;font-size:1.04rem}
.btn-claro{background:transparent;color:var(--blue);border:1.6px solid color-mix(in srgb,var(--blue) 40%,transparent)}
.btn-claro:hover{background:color-mix(in srgb,var(--blue) 8%,transparent);transform:translateY(-3px)}

.cot-online{
  position:relative;padding:34px 30px;border-radius:var(--r-lg);
  background:var(--surface);border:1.5px solid color-mix(in srgb,var(--blue) 30%,transparent);
  box-shadow:0 26px 60px -30px color-mix(in srgb,var(--blue) 60%,transparent);
}
.cot-online-tag{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--warm) 16%,transparent);color:#B5521C;
  font-family:var(--font-display);font-weight:800;font-size:12.4px;letter-spacing:.03em;
}
.cot-online-tag svg{width:14px;height:14px}
.cot-online h3{margin-top:16px;font-size:1.34rem}
.cot-pasos{list-style:none;counter-reset:paso;display:flex;flex-direction:column;gap:16px;margin:22px 0 26px;padding:0}
.cot-pasos li{counter-increment:paso;display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start}
.cot-pasos li::before{
  content:counter(paso);grid-row:1 / span 2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-family:var(--font-display);font-weight:800;font-size:15px;
}
.cot-pasos b{font-family:var(--font-display);font-size:15.4px}
.cot-pasos span{font-size:14px;line-height:1.55;color:var(--text-soft)}
.cierre .kicker{justify-content:center}
/* En celular la tarjeta de compra va antes de la ficha, para que el botón se vea primero */
@media (max-width:939px){ .cot-grid .cot-online{order:-1} }
@media (prefers-reduced-motion:reduce){ .btn-online::after{animation:none} }

/* ---- Lo que hace diferente (Bloque 7) ---- */
.dif-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px}
@media (min-width:660px){ .dif-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .dif-grid{grid-template-columns:repeat(4,1fr);gap:18px} }
.dif-card{
  padding:26px 24px;border-radius:var(--r);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--border);
}
@supports not (backdrop-filter:blur(2px)){ .dif-card{background:var(--surface)} }
.dif-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;margin-bottom:16px;
  background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--blue);
}
.dif-ic svg{width:20px;height:20px}
.dif-card h3{font-size:1.02rem;letter-spacing:-.02em}
.dif-card p{margin-top:9px;font-size:14px;line-height:1.66;color:var(--text-soft)}
.dif-mas{
  margin-top:26px;padding:26px 28px;border-radius:var(--r);
  background:var(--bg-alt);border:1px solid var(--border);
}
.dif-mas h3{font-size:1.06rem}
.dif-mas ul{margin-top:16px;display:grid;gap:9px}
@media (min-width:760px){ .dif-mas ul{grid-template-columns:repeat(2,1fr);gap:10px 28px} }
.dif-mas li{position:relative;padding-left:18px;font-size:14.4px;color:var(--text-soft)}
.dif-mas li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--warm)}
.dif-nota{margin-top:26px;font-size:12.6px;line-height:1.65;color:var(--text-mute);max-width:78ch}

/* ---- Barra fija de móvil (Bloque 6.2) ---- */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:190;
  display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
  transform:translateY(102%);transition:transform .32s var(--ease-out);
}
.barra-movil.show{transform:none}
@media (max-width:759px){ .barra-movil{display:flex} }
.barra-movil a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;border-radius:var(--r-sm);
  font-family:var(--font-display);font-weight:800;font-size:14.6px;
}
.barra-movil svg{width:19px;height:19px}
.bm-wa{background:var(--wa,#25D366);color:#06331a}
.bm-online{background:var(--blue);color:#fff}
/* Cuando la barra está arriba, la burbuja se quita para no pisarse */
body.con-barra .wa-float{opacity:0;pointer-events:none;transition:opacity .25s ease}

/* ---- Bloque Síguenos (Bloque 9.2) ---- */
.sig{border-top:1px solid var(--border)}
.sig-btns{display:grid;gap:14px;grid-template-columns:1fr;margin-top:36px;max-width:720px;margin-inline:auto}
@media (min-width:620px){ .sig-btns{grid-template-columns:repeat(2,1fr)} }
.sig-btn{
  display:flex;align-items:center;gap:15px;min-height:64px;
  padding:14px 22px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),color .3s ease,border-color .3s ease;
}
.sig-btn svg{width:26px;height:26px;flex:none}
.sig-btn span{display:flex;flex-direction:column;gap:2px;min-width:0}
.sig-btn b{font-family:var(--font-display);font-size:15.4px;letter-spacing:-.01em}
.sig-btn i{font-style:normal;font-size:12.8px;color:var(--text-mute)}
.sig-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sig-ig:hover{
  color:#fff;border-color:transparent;
  background:linear-gradient(45deg,#F9CE34 3%,#EE2A7B 45%,#6228D7 95%);
}
.sig-ig:hover i{color:rgba(255,255,255,.86)}
.sig-fb:hover{color:#fff;border-color:transparent;background:#1877F2}
.sig-fb:hover i{color:rgba(255,255,255,.86)}


/* ---- Redes en el menú móvil (Bloque 9.4) ---- */
.m-redes{display:flex;gap:12px;margin-top:22px}
.m-redes a{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--text-soft);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.m-redes a:hover{background:var(--bg-alt);color:var(--blue);transform:translateY(-2px)}
.m-redes svg{width:20px;height:20px}

/* ---- Pie más legible (Bloque 8.4 y 8.5) ---- */
.site-footer{color:rgba(255,255,255,.82)}
.f-brand p{font-size:14.6px;line-height:1.72;max-width:38ch;color:rgba(255,255,255,.78)}
.f-brand .logo-txt span{color:rgba(255,255,255,.72);font-size:12.6px}
.f-col h4{font-size:12.8px;color:#fff}
.f-col a,.f-col span{font-size:14.8px;padding-block:8px;color:rgba(255,255,255,.82)}
.f-col a:hover{color:#fff;text-decoration:underline}
.f-contact svg{width:17px;height:17px;margin-top:5px;opacity:.9}
.f-legal{font-size:12.8px;line-height:1.7;color:rgba(255,255,255,.72)}
.f-legal a{color:rgba(255,255,255,.9)}
.f-social a{width:44px;height:44px;border-color:rgba(255,255,255,.24)}
.f-social svg{width:19px;height:19px}

/* En celular las columnas de productos se pliegan (Bloque 8.10) */
@media (max-width:759px){
  .f-grid-ancha .f-col:not(.f-contact) h4{
    display:flex;align-items:center;justify-content:space-between;cursor:pointer;
    margin-bottom:0;padding-block:14px;border-bottom:1px solid rgba(255,255,255,.12);
  }
  .f-grid-ancha .f-col:not(.f-contact) h4::after{
    content:"";width:8px;height:8px;flex:none;margin-left:12px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .25s var(--ease-out);opacity:.7;
  }
  .f-grid-ancha .f-col.abierta h4::after{transform:rotate(-135deg)}
  .f-grid-ancha .f-col:not(.f-contact) a{display:none}
  .f-grid-ancha .f-col.abierta a{display:block}
  .f-grid-ancha .f-col.abierta a:first-of-type{padding-top:14px}
  .f-grid-ancha{grid-template-columns:1fr;gap:0}
  .f-grid-ancha .f-brand{margin-bottom:26px}
  .f-grid-ancha .f-contact{margin-top:26px}
}