/* =====================================================================
   Nutrimos & Servimos — Identidad corporativa (versión 3)
   Fuente: Manual de Imagen Corporativa (logosímbolo, Pantone 1797 C y 429 C,
   Helvetica Neue Condensed, elemento gráfico «mantel» y costuras) y uso
   reciente de la marca en los informes de gestión (gota, mascota, ilustraciones
   lineales de alimentos, fotografía del equipo).
   ===================================================================== */


/* ---------- Tipografía de secciones (patrón de los informes: «Indicadores / GENERALES») ---------- */
.titulo-seccion { max-width: 780px; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
.titulo-seccion-pre {
  margin: 0 0 .2rem; font: 700 clamp(1.02rem, .95rem + .3vw, 1.25rem)/1.2 var(--fuente-titulos);
  font-stretch: condensed; color: var(--grafito);
}
.titulo-seccion h2 {
  margin: 0; font-size: clamp(2.2rem, 1.35rem + 3vw, 3.9rem); line-height: .95;
  text-transform: uppercase; color: var(--rojo); letter-spacing: .003em;
}
.titulo-seccion h2 em { color: var(--grafito); }
.titulo-seccion-texto { margin: 1rem 0 0; max-width: 640px; font-size: var(--t-md); color: var(--texto-suave); }
.titulo-centro { margin-inline: auto; text-align: center; }
.titulo-centro .titulo-seccion-texto { margin-inline: auto; }
.titulo-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
.titulo-fila .titulo-seccion { margin-bottom: 0; }

/* ---------- Botones y controles ---------- */
.btn-primario { box-shadow: none; }
.btn-primario:hover { --btn-bg: var(--rojo-700); }
.btn-borde { --btn-borde: var(--gris-300); }
.btn-borde:hover { --btn-borde: var(--rojo); --btn-color: var(--rojo); }
.btn-claro { --btn-color: var(--rojo); }
.btn-claro:hover { --btn-bg: var(--rojo-100); --btn-color: var(--rojo-700); }
.filtro[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.enlace-flecha { color: var(--rojo); font-weight: 700; }
.seccion-gris { background: var(--gris-50); }

/* ---------- Barra superior y encabezado ---------- */
.barra-sup { background: var(--gris-100); color: var(--gris-700); }
.barra-sup a { color: var(--gris-800); }
.barra-sup a:hover { color: var(--rojo); }
.barra-sup .icono { color: var(--rojo); opacity: 1; }
.encabezado { border-bottom: 1px solid var(--gris-150); }
.encabezado::before { background: rgba(255, 255, 255, .97); }
.marca-logo { width: 178px; height: auto; transition: width .3s ease; }
.encabezado.is-desplazado .marca-logo { width: 150px; }
.nav-principal a.nav-enlace, .nav-principal button.nav-enlace {
  font: 400 1.06rem/1 var(--fuente-titulos); font-stretch: condensed; color: var(--gris-800); letter-spacing: .01em;
}
.nav-principal a.nav-enlace[aria-current="page"] { color: var(--rojo); }
@media (max-width: 1080px) { .marca-logo, .encabezado.is-desplazado .marca-logo { width: 140px; } }

/* ---------- Portada: mascota, equipo real y gota ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff 55%, var(--gris-50) 100%); border-bottom: 1px solid var(--gris-150); }
.hero-rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; padding-top: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.hero-texto { align-self: center; padding-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
.hero-sello { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.hero-sello span { padding: .42rem .7rem; font: 700 .78rem/1 var(--fuente-titulos); font-stretch: condensed; letter-spacing: .12em; text-transform: uppercase; }
.hero-sello span:first-child { background: var(--rojo); color: #fff; }
.hero-sello span:last-child { background: var(--gris-150); color: var(--gris-800); }
.hero h1 { margin: 0 0 1.15rem; font-size: clamp(2.3rem, 1.3rem + 3.7vw, 4.6rem); line-height: .95; color: var(--grafito); }
.hero-lead { max-width: 540px; margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--texto-suave); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 1.4rem; }
.btn-explorar { padding-left: .85rem; }
.btn-explorar .btn-avatar { width: 26px; height: auto; }
.hero-confianza { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--t-sm); font-weight: 700; color: var(--gris-700); }
.hero-confianza li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-confianza .icono { color: var(--rojo); }

.hero-visual { position: relative; }
.hero-escena { position: relative; height: clamp(440px, 330px + 18vw, 600px); }
.hero-gota {
  position: absolute; right: 3%; bottom: 0; height: 97%; aspect-ratio: 100 / 130;
  -webkit-mask: url(../img/marca/gota.svg) center / 100% 100% no-repeat; mask: url(../img/marca/gota.svg) center / 100% 100% no-repeat;
}
.hero-equipo { position: absolute; right: 0; bottom: 0; height: 84%; margin: 0; }
.hero-equipo picture, .hero-equipo img { height: 100%; width: auto; }
.hero-mascota { position: absolute; left: 0; bottom: 0; height: 64%; z-index: 2; transform-origin: 50% 100%; }
.hero-mascota picture, .hero-mascota img { height: 100%; width: auto; }
.hero-mascota img { animation: mascotaEntrar .7s cubic-bezier(.2, .7, .2, 1) both, mascotaSaludar 1.1s ease-in-out .8s 2; transform-origin: 50% 100%; }
@keyframes mascotaEntrar { from { opacity: 0; transform: translateY(24px); } }
@keyframes mascotaSaludar { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3.5deg); } 70% { transform: rotate(3deg); } }

/* Globo de bienvenida de la mascota */
.burbuja {
  position: absolute; left: 2%; bottom: calc(64% + 1rem); z-index: 3; width: min(310px, 68%);
  padding: 1rem 1.1rem 1.05rem; background: #fff; border: 1px solid var(--gris-150); border-radius: 14px; box-shadow: var(--sombra-lg);
}
.burbuja::after { content: ""; position: absolute; left: 2.6rem; bottom: -9px; width: 16px; height: 16px; background: #fff; border-right: 1px solid var(--gris-150); border-bottom: 1px solid var(--gris-150); transform: rotate(45deg); }
.burbuja[hidden] { display: none; }
.burbuja-titulo { margin: 0 1.6rem .2rem 0; font: 700 1.2rem/1.15 var(--fuente-titulos); font-stretch: condensed; color: var(--rojo); }
.burbuja-texto { margin: 0 0 .7rem; color: var(--texto-suave); font-size: var(--t-sm); }
.burbuja-accesos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.burbuja-accesos a { display: inline-block; padding: .3rem .6rem; border-radius: 6px; background: var(--gris-100); color: var(--grafito); font-size: var(--t-xs); font-weight: 700; text-decoration: none; }
.burbuja-accesos a:hover { background: var(--rojo); color: #fff; }
.burbuja-cerrar { position: absolute; right: .45rem; top: .45rem; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--gris-600); cursor: pointer; }
.burbuja-cerrar:hover { background: var(--gris-100); color: var(--grafito); }
.burbuja-explorar { display: none; }
.sin-js .burbuja-cerrar { display: none; }

/* Celular: titular → mascota con el equipo → bienvenida (con «Explora conmigo») → texto y botones */
@media (max-width: 860px) {
  .hero-rejilla { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 1.5rem; }
  .hero-texto { display: contents; }
  .hero-sello { order: 1; }
  .hero h1 { order: 2; margin-bottom: .75rem; }
  .hero-visual { order: 3; }
  .hero-lead { order: 4; margin-top: 1.25rem; }
  .hero-acciones { order: 5; }
  .hero-confianza { order: 6; margin-bottom: 2rem; }
  .hero-escena { height: 330px; }
  .hero-gota { right: 2%; height: 98%; }
  .hero-equipo { height: 84%; right: 0; }
  .hero-mascota { height: 58%; }
  .burbuja { position: relative; left: auto; bottom: auto; width: auto; margin: 1rem 0 0; }
  .burbuja::after { left: 2.4rem; top: -9px; bottom: auto; transform: rotate(225deg); }
  .burbuja-explorar { display: inline-flex; margin-bottom: .8rem; }
}
@media (max-width: 480px) {
  .hero-escena { height: 300px; }
  .hero-acciones .btn { flex: 1 1 100%; }
  .burbuja-accesos a { padding: .4rem .65rem; }
}

/* ---------- Accesos rápidos: banda «mantel» con letreros (señalización del manual) ---------- */
.accesos-mantel { position: relative; overflow: hidden; padding-block: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
.accesos-mantel::before, .accesos-mantel::after { content: ""; position: absolute; top: 50%; width: 420px; aspect-ratio: 1243 / 955; transform: translateY(-50%); background: url(../img/ilustraciones/alimentos-grupo-blanco.svg) center / contain no-repeat; opacity: .16; pointer-events: none; }
.accesos-mantel::before { left: -250px; }
.accesos-mantel::after { right: -250px; transform: translateY(-50%) scaleX(-1); }
.accesos-mantel .contenedor { position: relative; z-index: 1; }
.letreros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.letrero {
  position: relative; display: grid; justify-items: center; gap: .3rem; height: 100%;
  padding: 1.15rem .7rem 1.05rem; text-align: center; text-decoration: none;
  background: #fff; color: var(--grafito); border-radius: 6px; box-shadow: 0 6px 14px rgba(80, 0, 4, .18);
  transition: transform var(--transicion), box-shadow var(--transicion), color var(--transicion);
}
.letrero::before { content: ""; position: absolute; inset: 6px; border: 1.5px dashed rgba(222, 31, 38, .45); border-radius: 3px; pointer-events: none; }
.letrero .icono { width: 28px; height: 28px; color: var(--rojo); }
.letrero strong { font: 700 1.12rem/1.1 var(--fuente-titulos); font-stretch: condensed; text-transform: uppercase; letter-spacing: .02em; }
.letrero span { font-size: var(--t-xs); color: var(--texto-tenue); }
.letrero:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(80, 0, 4, .26); color: var(--rojo); }
@media (max-width: 1000px) { .letreros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .letreros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }

/* ---------- Cifras ---------- */
.cifras-v3 { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); background: #fff; border-bottom: 1px solid var(--gris-150); }
.cifras-rejilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.cifra { padding: .3rem 0 .3rem 1rem; border-left: 3px solid var(--rojo); }
.cifra strong { display: block; font: 700 clamp(2.4rem, 1.8rem + 2vw, 3.5rem)/1 var(--fuente-titulos); font-stretch: condensed; color: var(--rojo); font-variant-numeric: tabular-nums; }
.cifra .mas { color: var(--gris-400); }
.cifra-texto { display: block; margin-top: .35rem; max-width: 18ch; font-size: var(--t-sm); color: var(--texto-suave); }
@media (max-width: 900px) { .cifras-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } .cifra:last-child { grid-column: 1 / -1; } }

/* ---------- Quiénes somos ---------- */
.nosotros-v3 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 5vw, 5.5rem); align-items: center; }
.nosotros-visual { position: relative; max-width: 430px; width: 100%; justify-self: center; }
.foto-gota {
  margin: 0; aspect-ratio: 100 / 130; background: var(--gris-100);
  -webkit-mask: url(../img/marca/gota.svg) center / 100% 100% no-repeat; mask: url(../img/marca/gota.svg) center / 100% 100% no-repeat;
}
.foto-gota picture, .foto-gota img { width: 100%; height: 100%; object-fit: cover; }
.sello-2006 { position: absolute; right: -4%; bottom: 10%; margin: 0; padding: .85rem 1.1rem; text-align: center; color: #fff; background: var(--rojo); border-radius: 6px; box-shadow: var(--sombra-lg); }
.sello-2006 strong { display: block; font: 700 2.3rem/1 var(--fuente-titulos); font-stretch: condensed; }
.sello-2006 span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nosotros-texto > p { color: var(--texto-suave); }
.mision { margin: 1.6rem 0; }
.mision blockquote { margin: 0; padding: 1.1rem 1.3rem; background: var(--gris-50); border-left: 3px solid var(--rojo); }
.mision blockquote p { margin: 0; font: 400 clamp(1.2rem, 1rem + .7vw, 1.55rem)/1.28 var(--fuente-titulos); font-stretch: condensed; color: var(--grafito); }
.vision-v3 h3 { margin-bottom: .3rem; font-size: 1.15rem; color: var(--rojo); text-transform: uppercase; letter-spacing: .04em; }
.vision-v3 p { margin: 0; color: var(--texto-suave); }
.video-v3 { margin-top: 1.4rem; }
.video-v3 .video-marco { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: var(--gris-950); }
@media (max-width: 900px) { .nosotros-v3 { grid-template-columns: 1fr; } .nosotros-visual { max-width: 320px; } }

/* ---------- Valores ---------- */
.seccion-valores { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 3vw, 5rem); background: var(--gris-50); }
.seccion-valores::after { content: ""; position: absolute; right: -2%; bottom: -14px; width: min(760px, 70%); aspect-ratio: 1247 / 483; background: url(../img/ilustraciones/alimentos-banda-gris.svg) center / contain no-repeat; opacity: .35; pointer-events: none; }
.valores-v3 { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.valores-v3 li { padding: 1.35rem 1.2rem 1.4rem; background: #fff; border-top: 4px solid var(--rojo); border-radius: 0 0 10px 10px; box-shadow: var(--sombra-sm); }
.valor-num { font: 700 1.7rem/1 var(--fuente-titulos); font-stretch: condensed; color: var(--gris-300); }
.valores-v3 h3 { margin: .55rem 0 .4rem; font-size: 1.22rem; text-transform: uppercase; }
.valores-v3 p { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
@media (max-width: 1000px) { .valores-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .valores-v3 { grid-template-columns: 1fr; } }

/* ---------- Servicios: cada tarjeta con su propia composición ---------- */
.servicios-v3 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.servicio { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--gris-150); border-radius: 12px; transition: box-shadow var(--transicion), transform var(--transicion); }
.servicio:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.servicio-salud { grid-column: span 7; }
.servicio-corporativo { grid-column: span 5; }
.servicio-pedidos {
  grid-column: span 5; flex-direction: row; border: 0; color: #fff;
  background-color: var(--rojo);
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 6, 12, .13) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(0deg, rgba(110, 6, 12, .13) 0 26px, transparent 26px 52px);
}
.servicio-carta { grid-column: span 7; flex-direction: row; }
.servicio-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gris-100); }
.servicio-foto picture, .servicio-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.servicio:hover .servicio-foto img { transform: scale(1.04); }
.servicio-cuerpo { display: flex; flex-direction: column; gap: .15rem; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }
.servicio .pestana { align-self: flex-start; margin-bottom: .85rem; font-size: 1rem; color: #fff; }
.servicio .pestana.trama-blanca { color: var(--rojo); }
.servicio h3 { margin: 0 0 .45rem; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); text-transform: uppercase; }
.servicio p { color: var(--texto-suave); }
.servicio .enlace-flecha { margin-top: auto; }
.servicio-pedidos h3, .servicio-pedidos p, .servicio-pedidos .pasos-v3 { color: #fff; }
.servicio-pedidos .btn { align-self: flex-start; margin-top: auto; }
.pasos-v3 { counter-reset: paso; list-style: none; margin: .25rem 0 1.25rem; padding: 0; display: grid; gap: .55rem; }
.pasos-v3 li { counter-increment: paso; display: flex; gap: .65rem; align-items: center; font-weight: 700; font-size: var(--t-sm); }
.pasos-v3 li::before { content: counter(paso); flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--rojo); font-weight: 800; }
.servicio-mascota { flex: none; align-self: flex-end; width: 36%; margin: 0 .5rem -2px -1.5rem; }
.servicio-mascota img { width: 100%; height: auto; }
.servicio-platos { flex: none; width: 52%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .75rem; }
.servicio-platos picture, .servicio-platos img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
@media (max-width: 960px) {
  .servicio-salud, .servicio-corporativo, .servicio-pedidos, .servicio-carta { grid-column: span 12; }
  .servicio-carta { flex-direction: column; }
  .servicio-platos { width: 100%; padding-top: 0; }
}
@media (max-width: 520px) { .servicio-mascota { width: 40%; margin-left: -2.5rem; } }

/* ---------- Nuestro equipo ---------- */
.equipo-v3 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.equipo-galeria { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .75rem; }
.eg { margin: 0; overflow: hidden; border-radius: 10px; background: var(--gris-150); }
.eg picture, .eg img { width: 100%; height: 100%; object-fit: cover; }
.eg-colaboradora { grid-row: span 2; }
.eg-colaboradora img { object-position: 50% 25%; }
.eg-servicio { aspect-ratio: 4 / 3; }
.eg-afiche { aspect-ratio: 1; }
.equipo-texto > p { color: var(--texto-suave); }
.equipo-5c { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.equipo-5c li { padding: .35rem .7rem; border-radius: 4px; background: var(--rojo-100); color: var(--rojo-700); font: 700 .85rem/1 var(--fuente-titulos); font-stretch: condensed; text-transform: uppercase; letter-spacing: .04em; }
.equipo-accesos-v3 { display: grid; gap: .5rem; }
.acceso-linea { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--gris-150); border-radius: 8px; color: var(--grafito); text-decoration: none; transition: border-color var(--transicion), transform var(--transicion); }
.acceso-linea:hover { border-color: var(--rojo); transform: translateX(3px); color: var(--grafito); }
.acceso-linea > .icono:first-child { width: 24px; height: 24px; color: var(--rojo); }
.acceso-linea > .icono:last-child { margin-left: auto; color: var(--gris-400); }
.acceso-linea strong { display: block; font: 700 1.08rem/1.2 var(--fuente-titulos); font-stretch: condensed; }
.acceso-linea span span { font-size: var(--t-xs); color: var(--texto-tenue); }
@media (max-width: 900px) { .equipo-v3 { grid-template-columns: 1fr; } }

/* ---------- Calidad y compromiso ---------- */
.diferenciadores-v3 { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.diferenciadores-v3 li { padding-top: 1rem; border-top: 1px solid var(--gris-200); }
.diferenciadores-v3 .icono { width: 28px; height: 28px; color: var(--rojo); }
.diferenciadores-v3 h3 { margin: .6rem 0 .35rem; font-size: 1.2rem; text-transform: uppercase; }
.diferenciadores-v3 p { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
@media (max-width: 900px) { .diferenciadores-v3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .diferenciadores-v3 { grid-template-columns: 1fr; } }
.mapa-gestion { border-radius: 12px; }
.mg-soporte { background: var(--gris-marca); color: var(--grafito); }
.mg-soporte li { background: #fff; color: var(--grafito); }
.gestion-sello { border-radius: 10px; }
.gestion-sello .acceso-icono { background: var(--rojo-100); color: var(--rojo); }

/* ---------- Clientes, portafolio y sedes ---------- */
.clientes { background: #fff; }
.seccion-mantel {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(90deg, rgba(222, 31, 38, .035) 0 30px, transparent 30px 60px),
    repeating-linear-gradient(0deg, rgba(222, 31, 38, .035) 0 30px, transparent 30px 60px);
}
.plato { border-radius: 10px; }
.explorador-lista { border-radius: 12px; }
.explorador-lista button[aria-selected="true"] { background: var(--rojo); color: #fff; }
.explorador-lista .num { font-family: var(--fuente-titulos); font-stretch: condensed; font-style: normal; font-weight: 700; }
.explorador-lista button[aria-selected="true"] .num, .explorador-lista button[aria-selected="true"] small { color: rgba(255, 255, 255, .88); }
.explorador-panel { border-radius: 12px; }

/* ---------- Novedades: estado vacío con la mascota ---------- */
.vacio-mascota { display: flex; align-items: center; gap: clamp(1rem, .5rem + 2vw, 2rem); padding: 1.5rem clamp(1.25rem, 1rem + 2vw, 2.5rem); background: #fff; border: 1.5px dashed var(--gris-300); border-radius: 12px; }
.vacio-mascota .vacio-img { width: 120px; height: auto; flex: none; }
.vacio-mascota h3 { font-size: 1.35rem; text-transform: uppercase; }
.vacio-mascota p { color: var(--texto-suave); }
@media (max-width: 560px) { .vacio-mascota { flex-direction: column; text-align: center; } }

/* ---------- Preguntas y contacto ---------- */
.faq details { border-radius: 8px; }
.faq summary .icono { color: var(--rojo); }
.datos-contacto, .form-contacto { border-radius: 12px; }

/* ---------- Banda de contacto de las páginas internas ---------- */
.banda-cta { border-radius: 12px; }

/* ---------- Pie: el «reverso» de la marca (como la contraportada del manual) ---------- */
footer.pie {
  color: rgba(255, 255, 255, .92);
  background-color: var(--rojo);
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 6, 12, .13) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(0deg, rgba(110, 6, 12, .13) 0 26px, transparent 26px 52px);
}
.pie-firma { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pie-firma.trama-roja { background: none; }
.pie-firma p { font: 700 clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem)/1.02 var(--fuente-titulos); font-stretch: condensed; font-style: normal; text-transform: uppercase; color: #fff; }
.pie-firma p span { color: #fff; }
.pie-firma .pie-etiqueta { margin-right: .1em; opacity: .7; }
.pie-firma .btn-primario { --btn-bg: #fff; --btn-color: var(--rojo); }
.pie-firma .btn-primario:hover { --btn-bg: var(--rojo-100); --btn-color: var(--rojo-700); }
footer.pie h2 { color: #fff; font-family: var(--fuente-titulos); font-stretch: condensed; font-size: .95rem; letter-spacing: .12em; }
footer.pie a { color: #fff; }
footer.pie a.btn { color: var(--btn-color); }
footer.pie .redes .red { background: rgba(255, 255, 255, .16); color: #fff; }
footer.pie .redes .red:hover { background: #fff; color: var(--rojo); }
.pie-marca .marca-placa { padding: 0; background: none; box-shadow: none; }
.pie-marca .marca-placa img { width: 200px; }
.pie-marca p { color: rgba(255, 255, 255, .9); }
.pie-contacto .icono { color: #fff; }
.pie-inferior { background: var(--rojo-700); border-top: 0; }
.flotante-arriba { background: #fff; color: var(--rojo); }

/* =====================================================================
   Páginas internas (mismo lenguaje del inicio)
   ===================================================================== */

/* ---------- Cabecera de página ---------- */
.pagina-cabecera { position: relative; background: linear-gradient(180deg, #fff 0%, var(--gris-50) 100%); border-bottom: 0; }
.pagina-cabecera::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background-color: var(--rojo);
  background-image: repeating-linear-gradient(90deg, rgba(110, 6, 12, .13) 0 26px, transparent 26px 52px);
}
.pc-rejilla { align-items: center; padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem) clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.pc-rejilla.con-foto { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.pagina-cabecera h1 { margin: 0 0 .9rem; font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.2rem); line-height: .95; text-transform: uppercase; color: var(--rojo); }
.pagina-cabecera h1 em { color: var(--grafito); }
.pc-subtitulo { max-width: 600px; margin: 0; font-size: var(--t-md); color: var(--texto-suave); }
.pc-foto { width: min(100%, 300px); justify-self: end; margin: 0; }
.pc-foto::before { display: none; }
.pc-foto img { border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.pc-escena { position: relative; justify-self: end; width: min(100%, 320px); aspect-ratio: 1 / 1.05; }
.pc-escena .hero-gota { right: 8%; height: 100%; }
.pc-recorte { position: absolute; right: 0; bottom: 0; height: 88%; margin: 0; }
.pc-recorte picture, .pc-recorte img { height: 100%; width: auto; }
.migas { margin-bottom: 1.1rem; font-size: .8rem; }
.migas a { color: var(--gris-700); }
.migas a:hover { color: var(--rojo); }
.migas li[aria-current] { color: var(--rojo); font-weight: 700; }
@media (max-width: 860px) {
  .pc-rejilla.con-foto { grid-template-columns: 1fr; }
  .pc-foto, .pc-escena { justify-self: start; width: min(62%, 240px); }
}

/* ---------- Encabezados de sección heredados (antetítulo + h2) ---------- */
.antetitulo { gap: .4rem; font: 700 clamp(1rem, .95rem + .3vw, 1.2rem)/1.2 var(--fuente-titulos); font-stretch: condensed; letter-spacing: 0; text-transform: none; color: var(--grafito); }
.antetitulo::before { display: none; }
.antetitulo .indice { display: none; }
.encabezado-seccion h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: .97; text-transform: uppercase; color: var(--rojo); }
.encabezado-seccion h2 em { color: var(--grafito); }
.seccion-arena { background: var(--gris-50); }
.grupo-servicios > h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); text-transform: uppercase; color: var(--grafito); }
.grupo-servicios > h2 .icono { color: var(--rojo); }

/* ---------- Tarjetas de trámites y servicios: «letreros» con costura ---------- */
.servicio-digital { position: relative; border-radius: 8px; border: 1px solid var(--gris-150); box-shadow: 0 6px 16px rgba(33, 34, 36, .06); }
.servicio-digital::before { content: ""; position: absolute; inset: 6px; border: 1.5px dashed rgba(222, 31, 38, .32); border-radius: 4px; pointer-events: none; }
.servicio-digital:hover { border-color: var(--rojo); box-shadow: 0 10px 24px rgba(222, 31, 38, .12); }
.servicio-digital h3 { font-size: 1.2rem; text-transform: uppercase; }
.servicio-digital .acceso-icono { background: var(--rojo-100); color: var(--rojo); border-radius: 10px; }
.servicio-digital .pie { color: var(--rojo); border-top-color: var(--gris-150); }
.servicio-digital.is-pendiente { background: #fff; }
.servicio-digital.is-pendiente::before { border-color: var(--gris-300); }
.servicio-digital.is-pendiente .pie { color: var(--gris-600); }

/* ---------- Avisos informativos: neutros (sin azul) ---------- */
.alerta { border-radius: 8px; }
.alerta-info { background: var(--gris-50); color: var(--gris-800); border-color: var(--gris-200); }
.alerta-info .icono { color: var(--rojo); }

/* ---------- Biblioteca documental y buscador ---------- */
.buscador .control { border-radius: 8px; }
.documento { border-radius: 10px; border-left: 4px solid var(--rojo); }
.documento-icono { background: var(--rojo-100); color: var(--rojo); }
.documento-cuerpo h3 { font-size: 1.15rem; }
.resultados a { border-radius: 8px; border-left: 4px solid var(--rojo); }
.sin-resultados { border-radius: 8px; }

/* ---------- Carta ---------- */
.carta-nav a { border-radius: 6px; font: 700 .95rem/1 var(--fuente-titulos); font-stretch: condensed; text-transform: uppercase; letter-spacing: .03em; }
.carta-nav a:hover, .carta-nav a.is-activo { background: var(--rojo); color: #fff; }
.carta-seccion-titulo h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); text-transform: uppercase; color: var(--rojo); }
.carta-grupo { border-radius: 10px; border-top: 4px solid var(--rojo); }
.carta-grupo h3 { font-size: 1.25rem; text-transform: uppercase; }

/* ---------- Encuesta: las caritas originales de la mascota ---------- */
.pregunta { border-radius: 10px; }
.pregunta legend { font-size: 1.25rem; text-transform: uppercase; color: var(--grafito); }
.escala-opcion label { border-radius: 10px; }
.escala-opcion img { filter: none; }
.opcion-tarjeta label { border-radius: 8px; }

/* ---------- Pagos Tenaris ---------- */
.pagos-pasos { list-style: none; counter-reset: pp; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.pagos-pasos li { counter-increment: pp; display: inline-flex; align-items: center; gap: .5rem; font: 700 1rem/1.2 var(--fuente-titulos); font-stretch: condensed; text-transform: uppercase; color: var(--gris-700); }
.pagos-pasos li::before { content: counter(pp); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--rojo); color: #fff; }
.producto-pago { border-radius: 10px; }
.producto-pago h3 { text-transform: uppercase; }
.producto-pago .precio { color: var(--rojo); }
.cantidad { border-radius: 8px; }
.cantidad button { border-radius: 6px; }
.cantidad button:hover:not([disabled]) { background: var(--rojo); }
.resumen-pago .total { color: var(--rojo); }

/* ---------- Novedades, privacidad, estados vacíos ---------- */
.novedad { border-radius: 10px; }
.novedad h3 { text-transform: uppercase; }
.prosa h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.8rem); text-transform: uppercase; color: var(--rojo); }
.estado-vacio h1, .estado-vacio h2 { text-transform: uppercase; color: var(--rojo); }
.estado-vacio .mascota-vacio img { width: auto; height: 220px; margin: 0 auto 1.25rem; }

/* ---------- Banda de llamado a la acción de las páginas internas ---------- */
.banda-cta-v3 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; overflow: hidden; border-radius: 12px; }
.banda-cta-v3 .banda-cta-contenido { padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); max-width: 680px; }
.banda-cta-v3 h2 { margin-bottom: .6rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1; text-transform: uppercase; color: #fff; }
.banda-cta-v3 h2 em { color: #fff; opacity: .85; }
.banda-cta-v3 p { color: rgba(255, 255, 255, .92); font-size: var(--t-md); }
.banda-cta-v3 .btn-claro { --btn-color: var(--rojo); }
.banda-cta-mascota { align-self: end; width: clamp(130px, 9vw + 70px, 190px); margin-right: clamp(1rem, 4vw, 3.5rem); }
.banda-cta-mascota img { width: 100%; height: auto; }
@media (max-width: 640px) { .banda-cta-v3 { grid-template-columns: 1fr; } .banda-cta-mascota { display: none; } }

/* Sede publicada desde el panel sin fotografía */
.explorador-panel .sede-sin-foto { display: block; width: 100%; height: 100%; }