/* ============================================================
   EYUB' - layout.css
   Navegacion · portadas · pie de pagina · centro de atencion
   ============================================================ */

/* ---------- 1. AMBIENTE ---------- */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 88% -12%, rgba(1, 28, 89, .07), transparent 60%),
    radial-gradient(900px 600px at 2% 30%,   rgba(11, 61, 145, .05), transparent 62%),
    var(--fondo);
  transition: background var(--normal) var(--ease);
}
[data-tema="oscuro"] .cosmos {
  background:
    radial-gradient(1200px 780px at 78% -8%,  rgba(11, 61, 145, .42), transparent 60%),
    radial-gradient(920px 640px at 6% 12%,    rgba(1, 28, 89, .16), transparent 62%),
    var(--fondo);
}

/* Barra de progreso de lectura */
.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 120;
  background: linear-gradient(90deg, var(--azul-800), var(--azul-interactivo), #86B4FF);
  transition: width .1s linear;
}


/* ---------- 2. NAVEGACION ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--normal) var(--ease),
              box-shadow var(--normal) var(--ease),
              border-color var(--normal) var(--ease);
}

/* Sobre el hero oscuro la barra arranca transparente y en blanco */
.nav--sobre-foto { color: #fff; }
.nav--sobre-foto .marca__lema { color: rgba(255,255,255,.72); }
.nav--sobre-foto .menu__enlace { color: rgba(255,255,255,.86); }
.nav--sobre-foto .menu__enlace:hover { color: #fff; background: rgba(255,255,255,.14); }
.nav--sobre-foto .nav__icono { color: #fff; border-color: rgba(255,255,255,.30); }
.nav--sobre-foto .nav__icono:hover { background: rgba(255,255,255,.16); }

.nav.solido {
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--borde);
  box-shadow: 0 4px 24px rgba(6, 27, 58, .07);
  color: var(--texto);
}
.nav.solido .marca__lema  { color: var(--texto-ter); }
.nav.solido .menu__enlace { color: var(--texto-sec); }
.nav.solido .menu__enlace:hover { color: var(--texto); background: var(--superficie-2); }
.nav.solido .nav__icono { color: var(--texto-sec); border-color: var(--borde); }
.nav.solido .nav__icono:hover { background: var(--superficie-2); color: var(--texto); }

[data-tema="oscuro"] .nav.solido { box-shadow: 0 6px 30px rgba(3, 11, 29, .45); }

.nav__caja {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* --- Marca --- */
.marca { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }

.marca__sello {
  position: relative;
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.marca__sello img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 50%;
  transition: transform .8s var(--ease-out);
}
.marca:hover .marca__sello img { transform: rotate(360deg); }

.marca__sello::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(1, 28, 89, .35);
  border-top-color: var(--azul-interactivo);
  opacity: 0;
  transition: opacity var(--normal) var(--ease);
  animation: girar 3.5s linear infinite;
}
.marca:hover .marca__sello::after { opacity: 1; }

.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
/*
   El logotipo es el archivo oficial, no texto: así conserva su forma,
   su rojo y su apóstrofo exactos en cualquier tipografía o sistema.
   Se dimensiona por altura, que es lo que debe alinear con el sello.
*/
.marca__nombre {
  /* En una columna flex, width:auto equivale a estirarse: sin esto
     el logotipo se deforma hasta el ancho que marca el lema. */
  align-self: flex-start;
  width: auto;
  height: 26px;
  display: block;
}
@media (max-width: 420px) { .marca__nombre { height: 20px; } }
.marca__lema {
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-ter);
  white-space: nowrap;
}

/* --- Menu --- */
.menu { display: flex; align-items: center; gap: .12rem; margin-left: auto; }

.menu__enlace {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: .58rem .85rem;
  font-size: .89rem;
  font-weight: 600;
  color: var(--texto-sec);
  border-radius: var(--radio-full);
  white-space: nowrap;
  transition: color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.menu__enlace:hover { color: var(--texto); background: var(--superficie-2); }

.menu__enlace.activo { font-weight: 700; }
.menu__enlace.activo::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--azul-interactivo);
  box-shadow: 0 0 10px var(--azul-interactivo);
}
.nav--sobre-foto .menu__enlace.activo { color: #fff; }
.nav--sobre-foto .menu__enlace.activo::after { background: #fff; box-shadow: 0 0 10px #fff; }

/* Submenu */
.menu__grupo { position: relative; }
.menu__flecha { transition: transform var(--rapido) var(--ease); opacity: .7; margin-left: .35rem; }
.menu__grupo:hover .menu__flecha,
.menu__grupo:focus-within .menu__flecha { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 310px;
  padding: .6rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--normal) var(--ease);
}
.menu__grupo:hover .submenu,
.menu__grupo:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.submenu__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .68rem .82rem;
  border-radius: var(--radio-sm);
  transition: background var(--rapido) var(--ease);
}
.submenu__item:hover { background: var(--superficie-2); }
.submenu__item .ico { color: var(--acento); flex-shrink: 0; }
.submenu__item strong { display: block; font-size: .9rem; font-weight: 650; color: var(--texto); }
.submenu__item span   { display: block; font-size: .76rem; color: var(--texto-ter); line-height: 1.4; }

/* --- Acciones --- */
.nav__acciones { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Acceso al portal del cliente: la gente lo busca aqui, no en un desplegable */
.nav__portal {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 41px;
  padding: 0 .95rem;
  font-size: .85rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--texto-sec);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  transition: all var(--rapido) var(--ease);
}
.nav__portal .ico { color: var(--acento); flex-shrink: 0; }
.nav__portal:hover,
.nav__portal.activo {
  color: var(--azul-800);
  background: var(--azul-050);
  border-color: var(--borde-fuerte);
}
.nav--sobre-foto:not(.solido) .nav__portal {
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .28);
}
.nav--sobre-foto:not(.solido) .nav__portal .ico { color: #fff; }
.nav--sobre-foto:not(.solido) .nav__portal:hover {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .45);
}
/* En pantallas estrechas queda solo el icono; el texto vive en el menu */
@media (max-width: 1240px) { .nav__portal span:not(.apos) { display: none; } }
@media (max-width: 1240px) { .nav__portal { padding: 0; width: 41px; justify-content: center; } }
@media (max-width: 1140px) { .nav__portal { display: none; } }

.nav__icono {
  display: grid;
  place-items: center;
  width: 41px; height: 41px;
  border-radius: 50%;
  color: var(--texto-sec);
  border: 1px solid var(--borde);
  transition: all var(--rapido) var(--ease);
}
.nav__icono:hover { transform: translateY(-1px); }

.hamburguesa { display: none; }

@media (max-width: 1140px) {
  .menu { display: none; }
  .hamburguesa { display: grid; }
  .nav__cta { display: none; }
}

/* En pantallas angostas el lema de la marca se compacta en vez de
   desaparecer: sello y logo más chicos, letras más pegadas e
   iconos menores. Va aquí abajo para ganarle a los estilos base. */
@media (max-width: 420px) {
  .nav__caja    { gap: .8rem; }
  .marca        { gap: .55rem; }
  .marca__sello { width: 38px; height: 38px; }
  .marca__lema  { font-size: .5rem; letter-spacing: .06em; }
  .nav__icono   { width: 38px; height: 38px; }
}

/* Y en las más angostas de todas, un paso más de compacción */
@media (max-width: 350px) {
  .nav__caja    { padding-inline: .9rem; gap: .6rem; }
  .marca        { gap: .45rem; }
  .marca__sello { width: 33px; height: 33px; }
  .marca__nombre{ height: 17px; }
  .marca__lema  { font-size: .45rem; letter-spacing: .03em; }
  .nav__icono   { width: 35px; height: 35px; }
}


/* ---------- 3. MENU MOVIL ---------- */
.movil {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-alto) + 1.5rem) clamp(1.1rem, 5vw, 2.5rem) 2rem;
  background: var(--fondo);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: all var(--normal) var(--ease);
}
.movil.abierto { opacity: 1; visibility: visible; transform: none; }

.movil__lista { display: flex; flex-direction: column; gap: .1rem; }

.movil__enlace {
  display: flex;
  align-items: center;
  gap: 0;
  padding: .95rem .9rem;
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: var(--radio-sm);
  border-bottom: 1px solid var(--borde);
  color: var(--texto-sec);
  opacity: 0;
  transform: translateX(-16px);
  transition: color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.movil.abierto .movil__enlace {
  animation: entrar-movil .45s var(--ease-out) forwards;
  animation-delay: var(--retraso, 0ms);
}
@keyframes entrar-movil { to { opacity: 1; transform: none; } }

.movil__enlace .ico { color: var(--acento); flex-shrink: 0; margin-right: .9rem; }
.movil__enlace:hover, .movil__enlace.activo { color: var(--texto); background: var(--superficie-2); }

.movil__pie { margin-top: auto; padding-top: 1.6rem; display: grid; gap: .7rem; }

/* Barra inferior de contacto rapido */
.rapido {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 95;
  display: none;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -4px 20px rgba(6, 27, 58, .07);
  padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom));
}
.rapido__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  padding: .42rem .2rem;
  font-size: .66rem;
  font-weight: 650;
  color: var(--texto-ter);
  border-radius: var(--radio-sm);
  transition: color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.rapido__item:hover, .rapido__item:active { color: var(--texto); background: var(--superficie-2); }
.rapido__item--wa { color: #0F7B39; }

@media (max-width: 760px) {
  .rapido { display: flex; }
  body { padding-bottom: 70px; }
}


/* ---------- 4. CENTRO DE ATENCION ---------- */
.atencion { position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 98; }
@media (max-width: 760px) { .atencion { bottom: 82px; } }

.atencion__btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.3rem;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, var(--azul-800), var(--azul-interactivo));
  border-radius: var(--radio-full);
  box-shadow: 0 12px 36px rgba(1, 28, 89, .42);
  position: relative;
  transition: transform var(--normal) var(--ease-out);
}
.atencion__btn:hover { transform: translateY(-3px) scale(1.02); }

.atencion__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--azul-interactivo);
  animation: pulso-orbital 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes pulso-orbital {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.34); opacity: 0; }
}

.atencion__texto { white-space: nowrap; }
@media (max-width: 560px) {
  .atencion__texto { display: none; }
  .atencion__btn { padding: 1rem; border-radius: 50%; }
}

.atencion__panel {
  position: absolute;
  right: 0; bottom: calc(100% + .85rem);
  width: min(350px, calc(100vw - 2.3rem));
  max-height: min(560px, 70vh);
  overflow-y: auto;
  padding: 1.2rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  transform-origin: bottom right;
  transition: all var(--normal) var(--ease-out);
}
.atencion.abierto .atencion__panel { opacity: 1; visibility: visible; transform: none; }

.atencion__cabecera { margin-bottom: .9rem; }
.atencion__cabecera h4 { margin-bottom: .2rem; }
.atencion__cabecera p  { font-size: .82rem; color: var(--texto-ter); }

.atencion__area {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .7rem;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  transition: all var(--rapido) var(--ease);
}
.atencion__area:hover {
  background: var(--superficie-2);
  border-color: var(--borde);
  transform: translateX(3px);
}
.atencion__area .ico { color: var(--acento); flex-shrink: 0; }
.atencion__area strong { font-size: .89rem; font-weight: 650; display: block; }
.atencion__area small  { font-size: .74rem; color: var(--texto-ter); }
.atencion__area .flecha { margin-left: auto; color: var(--texto-ter); }

/* Estado de atencion */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 650;
  color: var(--texto-sec);
}
.estado__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--texto-ter);
  flex-shrink: 0;
}
.estado--disponible .estado__punto {
  background: var(--whatsapp);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .22);
  animation: latido 2.4s var(--ease) infinite;
}
.estado--breve .estado__punto { background: #F5A524; box-shadow: 0 0 0 3px rgba(245,165,36,.20); }


/* ---------- 5. PORTADA DE PAGINA INTERNA ---------- */
.portada {
  position: relative;
  padding-top: calc(var(--nav-alto) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(900px 520px at 88% 0%, rgba(1, 28, 89, .10), transparent 62%),
    var(--fondo);
  overflow: hidden;
}

.portada__caja {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 940px) {
  .portada__caja { grid-template-columns: 1fr; }
  .portada__foto { order: -1; }
}
.portada--sin-foto .portada__caja { grid-template-columns: 1fr; max-width: 860px; }

.portada__contenido { position: relative; z-index: 2; }
.portada h1 { margin-bottom: 1.1rem; }
.portada .lede { font-size: clamp(1.06rem, 1.9vw, 1.28rem); }
.portada__acciones { margin-top: 2.2rem; display: flex; gap: .85rem; flex-wrap: wrap; }

/* La fotografia va enmarcada, no a sangre: el fondo sigue siendo blanco */
.portada__foto { position: relative; }
.portada__foto .foto { border-radius: var(--radio-xl); }

/* Migas de pan */
.migas {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--texto-ter);
  margin-bottom: 1.3rem;
}
.migas a { transition: color var(--rapido) var(--ease); }
.migas a:hover { color: var(--azul-interactivo); }
.migas span { opacity: .55; }

/* Anillos decorativos */
.anillos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.anillos span {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(11, 61, 145, .09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.anillos span:nth-child(1) { width: 420px;  height: 420px;  }
.anillos span:nth-child(2) { width: 760px;  height: 760px;  }
.anillos span:nth-child(3) { width: 1140px; height: 1140px; }
.anillos span:nth-child(4) { width: 1560px; height: 1560px; }
.inverso .anillos span, [data-tema="oscuro"] .anillos span { border-color: rgba(134, 180, 255, .12); }

@keyframes girar     { to { transform: rotate(360deg); } }
@keyframes girar-inv { to { transform: rotate(-360deg); } }


/* ---------- 6. LLAMADO A LA ACCION FINAL ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.4rem, 5vw, 4rem);
  border-radius: var(--radio-xl);
  border: 1px solid var(--borde);
  background:
    radial-gradient(760px 380px at 50% 0%, rgba(1, 28, 89, .12), transparent 68%),
    linear-gradient(170deg, var(--azul-050), var(--fondo) 70%);
  box-shadow: var(--sombra-sm);
}
.cta-final h2 { margin-bottom: 1.1rem; }
.cta-final .lede { margin-inline: auto; margin-bottom: 2.2rem; }
.cta-final__acciones { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }


/* ---------- 7. PIE DE PAGINA ---------- */
.pie {
  position: relative;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  border-top: 1px solid var(--borde);
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(1, 28, 89, .07), transparent 62%),
    var(--fondo-alt);
}

.pie__arco {
  position: absolute;
  top: -320px; left: 50%;
  transform: translateX(-50%);
  width: 1200px; height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(11, 61, 145, .08);
  pointer-events: none;
}

.pie__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
  padding-bottom: 3rem;
}
@media (max-width: 1100px) { .pie__rejilla { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__rejilla { grid-template-columns: 1fr; } }

.pie__marca { max-width: 340px; }
.pie__marca .marca { margin-bottom: 1.1rem; }
.pie__marca p { font-size: .9rem; color: var(--texto-sec); margin-bottom: 1.3rem; }

.pie h5 {
  font-family: var(--fuente-titulo);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--texto-ter);
  margin-bottom: 1.05rem;
}

.pie__lista li { margin-bottom: .55rem; }
.pie__lista a {
  font-size: .89rem;
  color: var(--texto-sec);
  display: inline-block;
  transition: color var(--rapido) var(--ease), padding-left var(--rapido) var(--ease);
}
.pie__lista a:hover { color: var(--azul-interactivo); padding-left: 4px; }

.pie__contacto li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  color: var(--texto-sec);
  margin-bottom: .8rem;
}
.pie__contacto .ico { color: var(--acento); flex-shrink: 0; margin-top: .18rem; }
.pie__contacto a:hover { color: var(--azul-interactivo); }

.redes { display: flex; gap: .5rem; flex-wrap: wrap; }
.redes a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--texto-sec);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-sm);
  transition: all var(--normal) var(--ease-out);
}
.redes a:hover {
  color: #fff;
  background: var(--azul-interactivo);
  border-color: var(--azul-interactivo);
  transform: translateY(-3px) rotate(-8deg);
}

.pie__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid var(--borde);
  font-size: .82rem;
  color: var(--texto-ter);
}
.pie__base a:hover { color: var(--azul-interactivo); }
.pie__firma { display: flex; align-items: center; gap: .5rem; }