/* =====================================================================
   Nutrimos & Servimos — Sistema visual 2026 (versión 4)
   Capa común del portal público sobre identidad.css: los mismos colores,
   tipografía, gota y trama del manual, con una composición más amplia,
   escala fluida, botones de pastilla y un encabezado con menú amplio.
   ===================================================================== */

:root {
  --ancho-amplio: 1440px;
  --margen: clamp(1rem, .35rem + 3vw, 3.5rem);
  --alto-encabezado: 82px;
  --t-display: clamp(2.5rem, 1.5rem + 4.2vw, 5.6rem);
  --t-titulo: clamp(2.1rem, 1.35rem + 3vw, 4.1rem);
  --t-lead: clamp(1.06rem, .98rem + .38vw, 1.3rem);
  --r-tarjeta: clamp(18px, 10px + 1.2vw, 28px);
  --r-pastilla: 999px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --sombra-suave: 0 1px 2px rgba(33, 34, 36, .05), 0 14px 34px -16px rgba(33, 34, 36, .22);
  --sombra-flotante: 0 2px 6px rgba(33, 34, 36, .06), 0 28px 64px -22px rgba(33, 34, 36, .34);
  --trama-suave:
    repeating-linear-gradient(90deg, rgba(110, 6, 12, .1) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(0deg, rgba(110, 6, 12, .1) 0 26px, transparent 26px 52px);
}

.contenedor-amplio { width: min(100% - 2 * var(--margen), var(--ancho-amplio)); margin-inline: auto; }

/* ---------- Antetítulo editorial: punto rojo y mayúsculas espaciadas ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem;
  font: 700 .76rem/1.2 var(--fuente); letter-spacing: .16em; text-transform: uppercase; color: var(--gris-700);
}
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 4px var(--rojo-100); }
.eyebrow-claro { color: rgba(255, 255, 255, .88); }
.eyebrow-claro::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }

/* ---------- Botones: pastilla, con flecha que avanza ---------- */
.btn { border-radius: var(--r-pastilla); }
.btn-lg { min-height: 56px; padding: .95rem 1.75rem; font-size: 1rem; }
.btn .icono-avance { transition: transform .3s var(--curva); }
.btn:hover .icono-avance { transform: translateX(4px); }
.btn-primario { box-shadow: 0 14px 30px -14px rgba(222, 31, 38, .75); }
.btn-primario:hover { box-shadow: 0 18px 34px -14px rgba(222, 31, 38, .85); }
.btn-borde { --btn-borde: var(--gris-200); background: rgba(255, 255, 255, .7); }
.btn-borde:hover { --btn-borde: var(--grafito); --btn-color: var(--grafito); background: #fff; }
.btn-icono { width: 46px; min-height: 46px; padding: 0; }
.btn-sm.btn-icono { width: 42px; min-height: 42px; }

/* ---------- Barra superior: datos de contacto discretos ---------- */
.barra-sup { background: #fff; color: var(--gris-700); border-bottom: 1px solid var(--gris-150); font-size: .8rem; }
.barra-sup .contenedor { width: min(100% - 2 * var(--margen), var(--ancho-amplio)); min-height: 38px; }
.barra-sup a { color: var(--gris-800); }
.barra-sup a:hover { color: var(--rojo); }
.barra-sup .icono { width: 15px; height: 15px; color: var(--rojo); opacity: 1; }
.barra-sup-enlaces a { font-weight: 600; }

/* ---------- Encabezado: amplio, se compacta al bajar ---------- */
.encabezado { border-bottom: 1px solid transparent; }
.encabezado::before { background: rgba(255, 255, 255, .86); }
.encabezado.is-desplazado { border-color: transparent; box-shadow: 0 12px 32px -20px rgba(33, 34, 36, .45); }
.encabezado.is-desplazado::before { background: #fff; }
.encabezado > .contenedor {
  position: relative; width: min(100% - 2 * var(--margen), var(--ancho-amplio));
  min-height: var(--alto-encabezado); gap: clamp(1rem, .2rem + 1.6vw, 2.25rem);
}
.encabezado.is-desplazado > .contenedor { min-height: 66px; }
.marca-logo { width: clamp(148px, 120px + 3vw, 186px); }
.encabezado.is-desplazado .marca-logo { width: clamp(136px, 110px + 2.4vw, 160px); }
.encabezado-acciones { gap: .55rem; }
.encabezado-acciones .btn-sm { min-height: 44px; padding-inline: 1.15rem; font-size: .86rem; }
.encabezado-acciones .btn-sm.btn-icono { width: 44px; padding: 0; }

@media (min-width: 1081px) {
  .nav-principal { margin-inline: auto; }
  .nav-principal > ul { gap: .2rem; }
  .nav-principal a.nav-enlace, .nav-principal button.nav-enlace {
    padding: .75rem 1rem; border-radius: var(--r-pastilla);
    font: 600 .95rem/1 var(--fuente); font-stretch: normal; letter-spacing: 0; color: var(--grafito);
    transition: background var(--transicion), color var(--transicion);
  }
  .nav-principal a.nav-enlace:hover, .nav-principal button.nav-enlace:hover,
  .nav-desplegable[data-abierto="true"] > button.nav-enlace { background: var(--gris-100); color: var(--grafito); }
  /* Indicador: un punto rojo bajo el enlace activo o abierto */
  .nav-principal a.nav-enlace::after, .nav-principal button.nav-enlace::after {
    left: 50%; right: auto; bottom: .28rem; width: 5px; height: 5px; border-radius: 50%;
    transform: translateX(-50%) scale(0); transition: transform .25s var(--curva);
  }
  .nav-principal a.nav-enlace:hover::after, .nav-principal button.nav-enlace:hover::after { transform: translateX(-50%) scale(0); }
  .nav-principal a.nav-enlace[aria-current="page"]::after, .nav-desplegable[data-abierto="true"] > button::after { transform: translateX(-50%) scale(1); }
  .nav-principal a.nav-enlace[aria-current="page"] { color: var(--rojo); }

  /* Menú amplio: panel centrado bajo el encabezado, enlaces y una tarjeta destacada */
  .nav-desplegable { position: static; }
  .submenu {
    top: calc(100% + 6px); left: 50%; width: min(760px, calc(100vw - 2rem));
    display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: .5rem;
    padding: .6rem; border: 1px solid var(--gris-150); border-radius: 26px;
    box-shadow: var(--sombra-flotante); transform: translate(-50%, 8px);
    transition: opacity .22s var(--curva), visibility .22s, transform .3s var(--curva);
  }
  .nav-desplegable[data-abierto="true"] .submenu { transform: translate(-50%, 0); }
  /* Puente invisible para que el panel no se cierre al bajar el cursor desde el botón */
  .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 34px; }
}
.submenu .submenu-lista { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: .15rem; }
.submenu .submenu-lista a { display: flex; gap: .9rem; align-items: center; padding: .8rem .85rem; border-radius: 18px; color: var(--texto); text-decoration: none; transition: background var(--transicion); }
.submenu .submenu-lista a:hover { background: var(--gris-50); color: var(--texto); }
.submenu .submenu-lista a:hover .submenu-icono { background: var(--rojo); color: #fff; }
.submenu .submenu-icono { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--rojo-50); color: var(--rojo); transition: background var(--transicion), color var(--transicion); }
.submenu .submenu-icono .icono { width: 21px; height: 21px; margin: 0; color: currentColor; }
.submenu .submenu-lista strong { display: block; font-size: .95rem; color: var(--texto); }
.submenu .submenu-lista span span { display: block; font-size: .8rem; color: var(--texto-tenue); line-height: 1.4; }
.submenu .submenu-destacado {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 236px; padding: 1.15rem; overflow: hidden; border-radius: 20px;
  color: #fff; text-decoration: none; background: var(--rojo);
}
.submenu-destacado picture { position: absolute; inset: 0; z-index: -2; }
/* La foto del panel se descarga solo cuando el panel se abre */
.nav-desplegable:not([data-abierto="true"]) .submenu-destacado picture { display: none; }
.submenu-destacado picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.submenu-destacado::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(33, 34, 36, 0) 25%, rgba(33, 34, 36, .82) 100%); }
.submenu-destacado.es-mascota { background-color: var(--rojo); background-image: var(--trama-suave); }
.submenu-destacado.es-mascota::after { background: linear-gradient(180deg, rgba(110, 6, 12, 0) 40%, rgba(110, 6, 12, .55) 100%); }
.submenu-destacado.es-mascota picture { inset: auto -8px -10px auto; width: 112px; z-index: 0; }
.submenu-destacado.es-mascota picture img { height: auto; object-fit: contain; }
.submenu-destacado.es-mascota .submenu-destacado-texto { max-width: 120px; position: relative; z-index: 1; }
.submenu-destacado:hover { color: #fff; }
.submenu-destacado:hover picture img { transform: scale(1.05); }
.submenu-destacado strong { display: block; font: 700 1.35rem/1 var(--fuente-titulos); font-stretch: condensed; text-transform: uppercase; }
.submenu-destacado span { display: block; margin-top: .35rem; font-size: .8rem; color: rgba(255, 255, 255, .9); }
.submenu-destacado .icono-avance { width: 18px; height: 18px; margin-top: .65rem; }

/* ---------- Menú del celular: hoja completa con grupos plegables ---------- */
.nav-movil-marca { display: none; }
@media (max-width: 1080px) {
  .encabezado > .contenedor, .encabezado.is-desplazado > .contenedor { min-height: 68px; }
  .marca-logo, .encabezado.is-desplazado .marca-logo { width: 142px; }
  .nav-principal {
    inset: 0; width: 100%; padding: 0 var(--margen) 2rem; transform: none;
    opacity: 0; visibility: hidden; transition: opacity .25s var(--curva), visibility .25s;
    box-shadow: none; background: #fff;
  }
  .nav-principal.is-abierto { opacity: 1; visibility: visible; transform: none; }
  .nav-movil-marca { display: flex; align-items: center; min-height: 68px; margin-bottom: .5rem; border-bottom: 1px solid var(--gris-150); }
  .nav-movil-marca img { width: 142px; height: auto; }
  .nav-cerrar { top: 12px !important; right: var(--margen) !important; width: 44px; min-height: 44px; padding: 0; }
  .nav-principal > ul { gap: 0; }
  .nav-principal > ul > li { border-bottom: 1px solid var(--gris-150); }
  .nav-principal a.nav-enlace, .nav-principal button.nav-enlace {
    padding: 1.15rem .25rem; border-radius: 0; background: none;
    font: 700 1.45rem/1 var(--fuente-titulos); font-stretch: condensed; text-transform: uppercase; color: var(--grafito);
  }
  .nav-principal a.nav-enlace:hover, .nav-principal button.nav-enlace:hover { background: none; color: var(--rojo); }
  .nav-desplegable .icono { width: 20px; height: 20px; }
  .submenu { padding: 0 0 1rem; }
  .submenu .submenu-lista a { padding: .65rem .25rem; }
  .submenu .submenu-icono { width: 38px; height: 38px; border-radius: 12px; }
  .submenu .submenu-destacado { display: none; }
  .nav-movil-pie { margin-top: 1.75rem; padding-top: 0; border-top: 0; }
  .nav-movil-datos { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .92rem; color: var(--gris-700); }
  .nav-movil-datos li { display: flex; gap: .6rem; align-items: center; }
  .nav-movil-datos .icono { color: var(--rojo); }
  .nav-movil-datos a { color: var(--grafito); text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  .submenu, .nav-principal { transition: none; }
}

/* ---------- Secciones y títulos (sistema común) ---------- */
.seccion-v4 { padding-block: clamp(4rem, 2.8rem + 5vw, 8rem); }
.titulo-v4 { max-width: 760px; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.titulo-v4 h2 { margin: 0; font-size: var(--t-titulo); line-height: .92; letter-spacing: .002em; text-transform: uppercase; color: var(--rojo); }
.titulo-v4 h2 em { color: var(--grafito); }
.titulo-v4-texto { max-width: 58ch; margin: 1.1rem 0 0; font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); color: var(--gris-700); }
.titulo-fila-v4 { position: relative; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.titulo-fila-v4 .titulo-v4 { margin-bottom: 0; }
.texto-destacado { font-size: clamp(1.08rem, 1rem + .4vw, 1.32rem); line-height: 1.6; color: var(--gris-700); }
.acceso-linea { border-radius: 16px; }

/* Revelado de fotografías al desplazarse: se descubren desde abajo (sin dejar de verse del todo) */
.revelar.revelar-foto { transform: none; clip-path: inset(16% 0 0 0); transition: opacity .7s ease, clip-path 1.15s var(--curva); }
.revelar.revelar-foto.is-visible { clip-path: inset(0 0 0 0); }
.sin-js .revelar.revelar-foto { clip-path: none; }

/* ---------- Formularios ---------- */
.control { min-height: 50px; border-radius: 14px; }
textarea.control { border-radius: 16px; }
.filtro { padding: .6rem 1.1rem; }

/* ---------- Pie de página: hoja roja con la trama, lema grande y columnas ---------- */
footer.pie-v4 { position: relative; border-radius: clamp(28px, 1rem + 2vw, 52px) clamp(28px, 1rem + 2vw, 52px) 0 0; overflow: hidden; }
/* En el inicio la mascota se despide dentro del pie, entre el lema y los botones */
.pie-v4-firma { position: relative; }
.pie-ancla { display: none; }
@media (min-width: 1100px) { .pie-ancla { display: block; position: absolute; left: 52%; bottom: -1px; height: 230px; aspect-ratio: .48; } }
.pie-v4-firma { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.75rem 3rem; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.25rem, 1.5rem + 2vw, 3.5rem); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pie-v4-lema { max-width: 13ch; margin: 0; font: 700 clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem)/.88 var(--fuente-titulos); font-stretch: condensed; text-transform: uppercase; color: #fff; }
.pie-v4-lema em { font-style: normal; color: transparent; -webkit-text-stroke: 2px #fff; }
.pie-v4-lema .pie-etiqueta { opacity: .6; }
.pie-v4-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.pie-v4-cta .btn-claro { --btn-color: var(--rojo); }
.pie-v4-columnas { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.pie-v4 .pie-marca img { width: clamp(190px, 150px + 4vw, 240px); height: auto; }
.pie-v4 .pie-marca p { max-width: 36ch; }
.pie-v4 h2 { margin-bottom: 1.1rem; }
.pie-v4 ul a { text-decoration: none; opacity: .92; }
.pie-v4 ul a:hover { opacity: 1; text-decoration: underline; }
/* La esquina derecha queda libre para los botones flotantes y el lanzador del asistente (cabeza y globo):
   al llegar al final de la página no tapan los enlaces legales */
.pie-v4 .pie-inferior .contenedor { width: min(100% - 2 * var(--margen), var(--ancho-amplio)); padding-right: 4.75rem; }
@media (min-width: 641px) { .con-asistente .pie-v4 .pie-inferior .contenedor { padding-right: 19rem; } }
/* El lanzador recibe clics solo en lo que se ve: su globo oculto no bloquea lo que hay debajo */
.asistente-lanzador { pointer-events: none; }
.asistente-lanzador:not(.es-oculto) > * { pointer-events: auto; }
@media (max-width: 960px) { .pie-v4-columnas { grid-template-columns: 1fr 1fr; } .pie-v4 .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pie-v4-columnas { grid-template-columns: 1fr; } }

/* ---------- Botones flotantes ---------- */
.flotante { width: 54px; height: 54px; box-shadow: var(--sombra-flotante); }

/* =====================================================================
   Páginas internas con el sistema 2026: mismo ancho que el encabezado y el pie,
   cabecera editorial y componentes con las mismas formas de la portada.
   ===================================================================== */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho-amplio)); }
.seccion { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }

/* ---------- Cabecera de página ---------- */
.pagina-cabecera {
  position: relative; overflow: hidden; border-radius: 0 0 clamp(28px, 1rem + 2vw, 52px) clamp(28px, 1rem + 2vw, 52px);
  background:
    radial-gradient(55% 80% at 85% 30%, rgba(222, 31, 38, .08), transparent 70%),
    linear-gradient(180deg, #fff, var(--gris-50));
}
.pagina-cabecera::after { display: none; }
.pc-rejilla { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) clamp(2.5rem, 1.75rem + 3vw, 4.75rem); }
.pc-rejilla.con-foto { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
.pagina-cabecera h1 { margin: 0 0 1rem; font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.6rem); line-height: .9; }
.pc-subtitulo { max-width: 46ch; font-size: var(--t-lead); line-height: 1.55; color: var(--gris-700); }
.pagina-cabecera .titulo-seccion-pre { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1rem; font: 700 .76rem/1.2 var(--fuente); font-stretch: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-700); }
.pagina-cabecera .titulo-seccion-pre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 4px var(--rojo-100); }
.migas { gap: .35rem; margin-bottom: 1.4rem; }
.migas li { display: inline-flex; align-items: center; }
.migas a, .migas li[aria-current] { padding: .35rem .75rem; border-radius: var(--r-pastilla); background: rgba(255, 255, 255, .85); border: 1px solid var(--gris-150); text-decoration: none; }
.migas li[aria-current] { background: var(--rojo-50); border-color: transparent; }
.migas li + li::before { content: none; }
.pc-foto { width: min(100%, 340px); }
.pc-escena { width: min(100%, 360px); }

/* ---------- Encabezados de sección heredados ---------- */
.antetitulo { display: inline-flex; align-items: center; gap: .65rem; font: 700 .76rem/1.2 var(--fuente); font-stretch: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-700); }
.antetitulo::before { display: block; content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 4px var(--rojo-100); }
.encabezado-seccion h2 { font-size: var(--t-titulo); line-height: .92; }
.grupo-servicios > h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem); }
.grupo-servicios > h2 .icono { width: 1em; height: 1em; padding: .18em; border-radius: 12px; background: var(--rojo-50); }

/* ---------- Tarjetas de servicios y trámites ---------- */
.rejilla-servicios { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(.8rem, .55rem + .7vw, 1.2rem); }
.servicio-digital { gap: .8rem; padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); border: 1px solid var(--gris-150); border-radius: var(--r-tarjeta); box-shadow: 0 1px 2px rgba(33, 34, 36, .04); }
.servicio-digital::before { display: none; }
a.servicio-digital:hover { border-color: transparent; box-shadow: var(--sombra-flotante); transform: translateY(-4px); }
.servicio-digital .acceso-icono { width: 52px; height: 52px; border-radius: 16px; }
.servicio-digital h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1; }
.servicio-digital .pie { padding-top: .9rem; border-top-color: var(--gris-150); }
.servicio-digital.is-pendiente { background: var(--gris-50); border-style: solid; }
.servicio-digital.is-pendiente::before { display: none; }

/* ---------- Biblioteca de documentos y buscador ---------- */
.documentos { gap: clamp(.8rem, .55rem + .7vw, 1.2rem); }
.documento { padding: 1.35rem; border-color: var(--gris-150); border-left: 1px solid var(--gris-150); border-radius: var(--r-tarjeta); }
.documento:hover { border-color: transparent; box-shadow: var(--sombra-flotante); }
.documento-icono { border-radius: 12px; }
.buscador .control { border-radius: var(--r-pastilla); min-height: 52px; }
.resultados a { padding: 1.25rem 1.4rem; border-color: var(--gris-150); border-left: 1px solid var(--gris-150); border-radius: 20px; }
.resultados a:hover { border-color: transparent; box-shadow: var(--sombra-suave); }
.sin-resultados { border-radius: var(--r-tarjeta); border-style: solid; border-color: var(--gris-150); background: #fff; }

/* ---------- Carta ---------- */
.carta-nav { top: 66px; background: rgba(255, 255, 255, .96); }
.carta-nav a { padding: .6rem 1.1rem; border-radius: var(--r-pastilla); font: 700 .86rem/1 var(--fuente); font-stretch: normal; text-transform: none; letter-spacing: 0; }
.carta-seccion-titulo h2 { font-size: var(--t-titulo); line-height: .92; }
.carta-grupos { gap: clamp(.8rem, .55rem + .7vw, 1.2rem); }
.carta-grupo { border: 1px solid var(--gris-150); border-top: 4px solid var(--rojo); border-radius: var(--r-tarjeta); padding: 1.6rem 1.6rem 1.25rem; }
.carta-grupo h3 { font-size: 1.4rem; }

/* ---------- Encuesta, formularios y opciones ---------- */
.pregunta { border-color: var(--gris-150); border-radius: var(--r-tarjeta); padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.escala-opcion label { border-radius: 18px; }
.opcion-tarjeta label { border-radius: 16px; }
.paso { height: 8px; border-radius: 4px; }
.tarjeta { border-color: var(--gris-150); border-radius: var(--r-tarjeta); }
.tarjeta-elevada { box-shadow: var(--sombra-suave); }

/* ---------- Pagos Tenaris ---------- */
.producto-pago { border-color: var(--gris-150); border-radius: var(--r-tarjeta); padding: 1.4rem; }
.resumen-pago { border-radius: var(--r-tarjeta); }
.pagos-pasos li::before { box-shadow: 0 0 0 4px var(--rojo-100); }

/* ---------- Avisos, estados vacíos y novedades ---------- */
.alerta { border-radius: 18px; }
.novedad { border-color: var(--gris-150); border-radius: var(--r-tarjeta); }
.estado-vacio .mascota-vacio img { height: 240px; }
.faq details { border-color: var(--gris-150); border-radius: 22px; }
.faq details[open] { border-color: transparent; box-shadow: var(--sombra-suave); }
.faq summary .icono { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--rojo-50); }
.faq details[open] summary .icono { background: var(--rojo); color: #fff; }

/* ---------- Banda de llamado a la acción de las páginas internas ---------- */
.banda-cta-v3 { border-radius: var(--r-tarjeta); }
.banda-cta-v3 h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: .92; }
.banda-cta-v3 .banda-cta-contenido { padding: clamp(2rem, 1.5rem + 3vw, 4rem); max-width: 760px; }