:root {
  --pawnia-crema: #F3EACD;
  --pawnia-crema-tarjeta: #FAF4E3;
  --pawnia-marfil: #FFFBF0;
  --pawnia-gris-muy-claro: #F5F5F5;
  --pawnia-blanco: #FFFFFF;
  --pawnia-verde: #335B54;
  --pawnia-verde-osc: #1F6663;
  --pawnia-rosa: #DF3891;
  --pawnia-magenta: #C42A78;
  --pawnia-fucsia: #A62468;
  --pawnia-teal: #2F9997;
  --pawnia-lima: #C7F964;
  --koi-max-ancho: 1200px;
  --koi-font-display: 'Negula', 'Anton', sans-serif;
  --koi-font-texto: 'Work Sans', system-ui, sans-serif;
}

@font-face {
  font-family: 'Negula';
  src: url('../fonts/negula.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

/* En el html (no en un div envoltorio) para no romper position:sticky de
   las secciones de scroll horizontal del home — un overflow != visible en
   cualquier ancestro intermedio del elemento sticky lo desactiva. */
html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--koi-font-texto);
  color: var(--pawnia-verde);
  background: var(--pawnia-gris-muy-claro);
}

a { color: var(--pawnia-magenta); text-decoration: none; }
a:hover { color: var(--pawnia-verde); }

img { max-width: 100%; height: auto; display: block; }

/* ---------- botones y píldoras compartidas ---------- */

.koi-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 22px;
  font-family: var(--koi-font-texto);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
}
.koi-btn--rosa { background: var(--pawnia-rosa); color: var(--pawnia-blanco); }
.koi-btn--rosa:hover { background: var(--pawnia-fucsia); color: var(--pawnia-blanco); }
.koi-btn--linea { border-color: var(--pawnia-verde); color: var(--pawnia-verde); background: transparent; }
.koi-btn--linea:hover { background: var(--pawnia-verde); color: var(--pawnia-blanco); }
.koi-btn--crema { background: var(--pawnia-crema); color: var(--pawnia-verde); }

.koi-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
}

/* ---------- header / nav de marca (todo el sitio) ---------- */

.koi-topbar {
  background: var(--pawnia-verde);
  color: var(--pawnia-blanco);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px clamp(16px, 4vw, 48px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.koi-topbar__social { flex: 1 1 0; display: flex; align-items: center; gap: clamp(12px, 1.8vw, 18px); }
.koi-topbar__social a { color: var(--pawnia-blanco); display: inline-flex; align-items: center; }
.koi-topbar__aviso { white-space: nowrap; color: var(--pawnia-blanco); }
/* El detalle del plan de lanzamiento solo entra en escritorio ancho; más
   angosto queda solo "Plan de lanzamiento" (una línea, sin cortar). */
.koi-topbar__aviso-detalle { display: none; }
@media (min-width: 1180px) { .koi-topbar__aviso-detalle { display: inline; } }
/* Pantallas muy angostas: solo 2 redes, para que el botón de moneda no se salga. */
@media (max-width: 380px) { .koi-topbar__social a:nth-child(n+3) { display: none; } }
.koi-topbar__moneda { flex: 1 1 0; display: flex; justify-content: flex-end; }
.koi-moneda-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(243,234,205,.4); border-radius: 999px;
  padding: 5px 13px; background: none; color: var(--pawnia-blanco);
  font-family: var(--koi-font-texto); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.koi-moneda-menu {
  position: absolute; top: calc(100% + 8px); right: clamp(16px, 4vw, 48px);
  background: var(--pawnia-crema); border-radius: 16px; padding: 6px;
  display: none; grid-template-columns: repeat(2, 1fr); gap: 6px; z-index: 60;
  box-shadow: 0 12px 30px rgba(51,91,84,.25);
}
.koi-moneda-menu[data-abierto="1"] { display: grid; }
.koi-moneda-menu button {
  border: 0; border-radius: 12px; padding: 10px; background: var(--pawnia-crema-tarjeta);
  color: var(--pawnia-verde); font-family: var(--koi-font-texto); font-weight: 700; cursor: pointer;
}
.koi-moneda-menu button:hover { background: var(--pawnia-lima); }

.koi-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: stretch;
  padding: 0; background: transparent;
  margin: 0; max-width: none;
}
/* Menú: una barra fija arriba, de borde a borde y sin esquinas redondeadas (igual al principio y al
   hacer scroll). Blanca, un poco transparente, con el contenido apenas borroso detrás. */
.koi-header__inner {
  position: relative;
  flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px clamp(18px, 3vw, 40px);
  border-radius: 0;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .25s ease;
}
/* Al hacer scroll, una sombra suave para separarla del contenido. */
.koi-header--encogido .koi-header__inner { box-shadow: 0 6px 20px rgba(17, 17, 17, .08); }
/* ---------- Solo en el inicio ----------
   Arriba de todo es una pestaña blanca con las esquinas de arriba redondeadas; al deslizar se
   acomoda como la barra fija de las demás páginas (pegada arriba, de borde a borde, sin radio). */
body.home .koi-header { padding: clamp(14px, 2.2vw, 28px) clamp(12px, 2vw, 26px) 0; transition: padding .3s ease; }
body.home .koi-header__inner {
  padding: 8px clamp(18px, 3vw, 40px); background: var(--pawnia-blanco);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: clamp(20px, 2.6vw, 34px) clamp(20px, 2.6vw, 34px) 0 0;
  transition: background .3s ease, box-shadow .3s ease, border-radius .3s ease, padding .3s ease;
}
body.home .koi-header--encogido { padding: 0; }
body.home .koi-header--encogido .koi-header__inner {
  padding: 8px clamp(18px, 3vw, 40px); border-radius: 0;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(17, 17, 17, .08);
}
.koi-header__nav { flex: 1 1 0; display: flex; align-items: center; gap: clamp(12px, 2.2vw, 26px); flex-wrap: wrap; }
.koi-nav { list-style: none; display: flex; gap: clamp(12px, 2.2vw, 26px); margin: 0; padding: 0; flex-wrap: wrap; }
.koi-nav a { color: var(--pawnia-verde); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.koi-logo {
  font-family: var(--koi-font-display); font-weight: 400; font-size: clamp(28px, 4vw, 46px);
  line-height: 1; letter-spacing: -.02em; color: var(--pawnia-verde); text-transform: uppercase;
  white-space: nowrap; padding: 2px 6px;
}
.koi-logo[data-hidden] { opacity: 0; }
@keyframes pawnia-hue {
  0%, 22.2% { color: var(--pawnia-verde); } 22.3%, 47.2% { color: var(--pawnia-rosa); }
  47.3%, 72.2% { color: var(--pawnia-teal); } 72.3%, 97.2% { color: var(--pawnia-magenta); }
  97.3%, 100% { color: var(--pawnia-verde); }
}
.koi-logo span { display: inline-block; color: inherit; animation: pawnia-hue 18.4s steps(1, end) infinite; }
@keyframes pawnia-tail {
  0%, 84.3%, 100% { transform: rotate(0deg); } 88.2% { transform: rotate(-9deg); }
  92.1% { transform: rotate(7deg); } 96% { transform: rotate(-4deg); }
}
.koi-logo span:last-child { animation: pawnia-hue 18.4s steps(1, end) infinite, pawnia-tail 4.6s ease-in-out infinite; }
.koi-header__acciones { flex: 1 1 0; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- contenido interior (páginas no-home) ---------- */

.koi-main { max-width: var(--koi-max-ancho); margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px); }
.koi-entry-content { font-size: 16px; line-height: 1.7; }
.koi-entry-content h1, .koi-entry-content h2, .koi-entry-content h3 {
  font-family: var(--koi-font-display); font-weight: 400; text-transform: uppercase; line-height: 1.1;
}
.koi-bienvenida { text-align: center; padding: 80px 20px; }

/* ---------- footer de marca ---------- */

.koi-footer { background: var(--pawnia-verde); color: var(--pawnia-blanco); padding: clamp(32px, 4vw, 52px) clamp(16px, 4vw, 48px) 0; }
.koi-footer__cols { max-width: var(--koi-max-ancho); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; }
.koi-footer__marca { font-family: var(--koi-font-display); font-size: 22px; text-transform: uppercase; }
.koi-footer__tag { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255,.65); margin: 10px 0 0; max-width: 30ch; }
.koi-footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.koi-footer__col span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255,.78); }
.koi-footer__col a { color: var(--pawnia-blanco); }
.koi-footer__legal { max-width: var(--koi-max-ancho); margin: 28px auto 0; padding-top: 18px; border-top: 1px solid rgba(243,234,205,.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255,.78); }
.koi-footer__legal .koi-nav--footer { gap: 16px; }
.koi-footer__legal .koi-nav--footer a { color: rgba(255, 255, 255,.78); font-size: 12px; text-transform: none; font-weight: 400; letter-spacing: 0; }
.koi-footer__wordmark { max-width: var(--koi-max-ancho); margin: clamp(24px, 4vw, 48px) auto 0; height: clamp(52px, 7vw, 110px); overflow: hidden; display: flex; justify-content: center; }
.koi-footer__wordmark span { font-family: var(--koi-font-display); font-size: clamp(104px, 15vw, 232px); line-height: 1; letter-spacing: -.02em; color: var(--pawnia-lima); text-transform: uppercase; white-space: nowrap; }

/* ---------- tarjeta de proyecto (portafolio, reusada en varias páginas) ---------- */

.pwn-proyecto-card { display: block; position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; }
.pwn-proyecto-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pwn-proyecto-card__texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(14px, 1.8vw, 20px); background: linear-gradient(180deg, rgba(51, 91, 84, 0) 45%, rgba(30, 48, 42, .82)); }
.pwn-proyecto-card__texto span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pawnia-lima); }
.pwn-proyecto-card__texto h3 { font-family: var(--koi-font-display); font-weight: 400; font-size: 22px; line-height: 1.1; margin: 4px 0 0; text-transform: uppercase; color: var(--pawnia-blanco); }

/* ---------- cursor a medida (todo el sitio, solo puntero fino) ---------- */

[data-koi-dot] {
  position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pawnia-rosa); z-index: 200; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, width .2s ease, height .2s ease, background .2s ease;
}

/* ---------- menú hamburguesa (mobile) ---------- */

.koi-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer; padding: 0;
  flex: none;
}
.koi-hamburger span { display: block; width: 100%; height: 2px; background: var(--pawnia-verde); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.koi-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.koi-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.koi-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.koi-menu-movil {
  display: none; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 0;
  padding: 14px clamp(18px, 3vw, 40px) 18px;
  /* .koi-header es flex; sin esto el panel entra como flex item al lado
     de la barra en vez de caer debajo (bug real: se veía cortado a la derecha) */
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 0; z-index: 40;
  box-shadow: 0 12px 30px rgba(17, 17, 17, .12);
}
.koi-menu-movil[data-abierto] { display: flex; }
.koi-nav--movil { flex-direction: column; gap: 4px; }
.koi-nav--movil a, .koi-menu-movil > a { padding: 10px 0; border-top: 1px solid rgba(51, 91, 84, .12); }
.koi-nav--movil li:first-child a { border-top: 0; }

@media (max-width: 720px) {
  .koi-header__nav, .koi-header__mi-espacio { display: none; }
  .koi-hamburger { display: flex; }
}

/* Etiqueta "EJEMPLO" de proyectos ilustrativos (home + página de proyecto). */
.pwn-ejemplo { display: inline-block; background: var(--pawnia-lima); color: var(--pawnia-verde); border-radius: 12px; padding: 8px 14px; font-size: 14px; line-height: 1.35; max-width: 46ch; }
.pwn-ejemplo strong { text-transform: uppercase; letter-spacing: .04em; }
.pwn-proyecto__hero .pwn-ejemplo { margin-bottom: 16px; }

/* Tildes dibujadas para la fuente display (Negula no las trae) — ver nucleo/class-tipografia.php. */
.koi-tilde, .koi-enie, .koi-girado { display: inline-block; position: relative; }
.koi-tilde::after {
  content: ''; position: absolute; left: 50%; top: -.2em;
  width: .13em; height: .2em; background: currentColor; border-radius: .03em;
  transform: translateX(-35%) skewX(-40deg);
}
.koi-enie::after {
  content: ''; position: absolute; left: 50%; top: -.19em;
  width: .42em; height: .14em; background: currentColor; transform: translateX(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M2 8c3-7 8-6 13-2s10 3 13-4' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M2 8c3-7 8-6 13-2s10 3 13-4' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.koi-girado { transform: rotate(180deg); }
/* La letra base se dibuja con data-b; la real (con tilde) queda en .koi-r, fuera de la vista. */
.koi-tilde[data-b]::before, .koi-enie[data-b]::before, .koi-girado[data-b]::before { content: attr(data-b); }
.koi-r { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Minúsculas (medido en Negula: x-height .563em, punto de la i .60–.76em). */
.koi-min.koi-tilde::after { top: -.05em; }
.koi-min.koi-enie::after {
  top: -.01em; width: .44em; height: .16em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M2.6 7.4c3-6 8-5.4 12.4-1.8s10 3 12.4-3.2' fill='none' stroke='black' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M2.6 7.4c3-6 8-5.4 12.4-1.8s10 3 12.4-3.2' fill='none' stroke='black' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Negula no trae ı: se recorta el punto de la i y la tilde ocupa su lugar. */
.koi-i::before { display: inline-block; clip-path: inset(.175em -.1em -.3em -.1em); }
/* Titulares en mayúsculas por CSS: vuelve a la tilde de mayúscula. */
.koi-mayus .koi-min.koi-tilde::after { top: -.2em; }
.koi-mayus .koi-min.koi-enie::after { top: -.19em; width: .42em; height: .14em; }
.koi-mayus .koi-i::before { clip-path: none; }

/* Banderas de moneda en SVG (Twemoji, CC-BY 4.0) en vez de emoji. */
.koi-bandera { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* Nota fija en los escenarios con la marca de ejemplo (GATERING) y cifras inventadas (doc de Carlos, 2026-10-04). */
.koi-nota-ejemplo {
	position: absolute; right: 16px; bottom: clamp(10px, 2.4svh, 24px); z-index: 6; margin: 0;
	font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; opacity: .6; pointer-events: none;
}
/* En la intro no hay mockup todavía. */
[data-fase="0"] > .koi-nota-ejemplo { opacity: 0; }
.koi-nota-ejemplo { transition: opacity .4s; }
/* En celular va centrada al borde de abajo, debajo de la barra de progreso. */
@media (max-width: 700px) { .koi-nota-ejemplo { right: 0; left: 0; bottom: 3px; font-size: 10px; text-align: center; white-space: nowrap; } }

/* Línea de precio en las páginas de servicio: el precio vive solo en el home (#precios). */
.koi-precio { padding: clamp(40px, 6vw, 72px) 16px 0; background: #fff; }
.koi-precio-linea { max-width: 720px; margin: 0 auto; text-align: center; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }
.bpr + .koi-precio-linea { margin-top: clamp(28px, 4vw, 48px); }
.koi-precio-linea a { margin-left: .3em; font-weight: 700; color: var(--pawnia-rosa); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }

/* Preguntas frecuentes de PawCode y MediaSnout (template-parts/faq.php): acordeón sin JS, como el de BrandPet. */
.koi-faq { --faq-acento: var(--pawnia-rosa); background: #F7F7F5; padding: clamp(72px, 10vw, 140px) 16px; }
.koi-faq--pawcode { --faq-acento: #6FA82B; } /* verde lima oscurecido para que se lea sobre blanco (antes amarillo #D99A12) */
.koi-faq--pawcode .koi-faq__item summary::after { background: var(--pawnia-lima); color: var(--pawnia-verde); }
.koi-faq--mediasnout { --faq-acento: #2F9997; }
.koi-faq__cabeza { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
.koi-faq__eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faq-acento); }
.koi-faq__titulo { margin: 10px auto 0; font-family: var(--koi-font-texto); font-weight: 600; text-transform: none; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; color: #111; }
.koi-faq__lista { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.koi-faq__item { border-radius: 20px; background: #fff; border: 1px solid rgba(17, 17, 17, .06); }
.koi-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; color: #111; }
.koi-faq__item summary::-webkit-details-marker { display: none; }
.koi-faq__item summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--faq-acento); color: #fff; font-size: 20px; line-height: 1; transition: transform .25s; }
.koi-faq__item[open] summary::after { transform: rotate(45deg); }
.koi-faq__item summary:focus-visible { outline: 3px solid var(--faq-acento); outline-offset: 3px; border-radius: 20px; }
.koi-faq__item p { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.6; opacity: .75; }

/* Páginas-historia: el escenario sube detrás del menú flotante. El JS lo ajusta al alto exacto del menú;
   este valor de entrada (el alto real: 66px, 59px en celular) evita que la página salte al cargar. */
.bph, .pcw, .msn { margin-top: -66px; }
@media (max-width: 700px) { .bph, .pcw, .msn { margin-top: -59px; } }

/* Menú integrado sobre las pantallas a color (pilares del inicio, intro de BrandPet/PawCode/MediaSnout):
   sin fondo y todo en blanco (base.js › initMenuSobreColor). !important: el logo anima su color y
   "Mi espacio" trae el color en línea. */
.koi-header__inner, .koi-nav a, .koi-header__mi-espacio, .koi-logo span, .koi-hamburger span, .koi-header .koi-btn { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.koi-header--sobre-color .koi-header__inner,
body.home .koi-header--sobre-color.koi-header--encogido .koi-header__inner { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
.koi-header--sobre-color .koi-nav a, .koi-header--sobre-color .koi-header__mi-espacio, .koi-header--sobre-color .koi-logo span { color: #fff !important; }
.koi-header--sobre-color .koi-hamburger span { background: #fff; }
.koi-header--sobre-color .koi-header__acciones .koi-btn { background: #fff; color: var(--pawnia-verde); }

/* Enlaces legales del pie. */
.koi-footer__legales { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.koi-footer__legales a { color: rgba(255, 255, 255, .78); font-size: 12px; text-decoration: underline; text-underline-offset: .2em; }
.koi-footer__legales a:hover { color: var(--pawnia-lima); }

/* ---------- Menú: Servicios desplegable a lo ancho (pedido de Santiago, 2026-10-05) ---------- */
.koi-nav__boton { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--pawnia-verde); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.koi-nav__flecha { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.koi-nav__boton[aria-expanded="true"] .koi-nav__flecha { transform: translateY(1px) rotate(-135deg); }
.koi-nav__volver { display: inline-flex; align-items: center; gap: 6px; }
.koi-nav__volver span { display: inline-block; transition: transform .25s ease; }
.koi-nav__volver:hover span { transform: translateX(-3px); }
.koi-header--sobre-color .koi-nav__boton { color: #fff; }
.koi-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 45; padding: 14px clamp(18px, 3vw, 40px) 22px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(17, 17, 17, .12); }
.koi-mega[hidden] { display: none; }
.koi-mega:not([hidden]) { animation: koi-mega-abre .25s ease; }
@keyframes koi-mega-abre { from { opacity: 0; transform: translateY(-8px); } }
.koi-mega__grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; }
.koi-mega__tarjeta { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 22px 24px; border-radius: 22px; color: #fff; overflow: hidden; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.koi-mega__tarjeta:hover, .koi-mega__tarjeta:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17, 17, 17, .16); color: #fff; }
.koi-mega__tarjeta--rosa { background: var(--pawnia-rosa); }
.koi-mega__tarjeta--pawcode { background: #D99A12; }
.koi-mega__tarjeta--teal { background: var(--pawnia-teal); }
.koi-mega__tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.koi-mega__nombre { font-family: var(--koi-font-display); font-size: clamp(30px, 3vw, 44px); line-height: 1; }
.koi-mega__texto { max-width: 30ch; font-size: 14px; line-height: 1.45; opacity: .92; }
.koi-mega__ir { position: absolute; right: 18px; bottom: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--pawnia-verde); font-weight: 700; transition: transform .25s ease; }
.koi-mega__tarjeta:hover .koi-mega__ir { transform: translateX(3px); }
/* Menú móvil con los servicios. */
.koi-menu-movil__titulo { padding: 8px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pawnia-rosa); }
.koi-menu-movil > a.koi-menu-movil__servicio { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0; padding: 12px 16px; border: 0; border-radius: 14px; color: #fff; }
.koi-menu-movil__servicio b { font-family: var(--koi-font-display); font-weight: 400; font-size: 22px; }
.koi-menu-movil__servicio small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.koi-menu-movil__servicio--rosa { background: var(--pawnia-rosa); }
.koi-menu-movil__servicio--pawcode { background: #D99A12; }
.koi-menu-movil__servicio--teal { background: var(--pawnia-teal); }
.koi-menu-movil > a { color: var(--pawnia-verde); font-weight: 700; }
@media (max-width: 720px) { .koi-mega { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .koi-mega:not([hidden]) { animation: none; } }
.koi-menu-movil { background: #fff; } /* opaco: antes se transparentaba el contenido de atrás */

/* "Conoce los otros servicios" (final de las páginas de servicio). */
.koi-otros { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 16px; }
.koi-otros__cabeza { margin-bottom: clamp(20px, 3vw, 32px); }
.koi-otros__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pawnia-rosa); }
.koi-otros__titulo { margin: 8px 0 0; font-family: var(--koi-font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; text-transform: uppercase; color: var(--pawnia-verde); }
.koi-otros__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.koi-otros__tarjeta { min-height: clamp(180px, 18vw, 240px); padding: clamp(24px, 3vw, 36px); }
.koi-otros__tarjeta .koi-mega__nombre { font-size: clamp(40px, 5vw, 72px); }
.koi-otros__tarjeta .koi-mega__texto { font-size: 16px; }
@media (max-width: 700px) { .koi-otros__grilla { grid-template-columns: 1fr; } }

/* ---------- modal de moneda ---------- */

.pwn-moneda-modal {
	position: fixed; inset: 0; z-index: 140; background: rgba(51, 91, 84, .72);
	display: grid; place-items: center; padding: 20px;
}
.pwn-moneda-modal[hidden] { display: none; }
.pwn-moneda-modal__caja {
	background: var(--pawnia-crema); color: var(--pawnia-verde); border-radius: 24px;
	padding: clamp(24px, 3.4vw, 40px); max-width: 460px; width: 100%; text-align: center;
}
.pwn-moneda-modal__caja h2 {
	font-family: var(--koi-font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.1; padding-top: .06em; margin: 0; text-transform: uppercase;
}
.pwn-moneda-modal__caja p { margin: 12px 0 22px; font-size: 15px; line-height: 1.6; color: rgba(51, 91, 84, .8); }
.pwn-moneda-modal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pwn-moneda-modal__grid button {
	border: 1px solid rgba(51, 91, 84, .25); border-radius: 16px; padding: 16px 12px;
	background: var(--pawnia-crema-tarjeta); color: var(--pawnia-verde);
	font-family: var(--koi-font-display); font-size: 24px; text-transform: uppercase; cursor: pointer;
}
.pwn-moneda-modal__grid button:hover { background: var(--pawnia-lima); border-color: var(--pawnia-lima); }
/* Idioma (debajo de las monedas): mismo lenguaje que los botones de moneda, más bajito. */
.pwn-moneda-modal__idioma { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(51, 91, 84, .15); }
.pwn-moneda-modal__idioma-titulo { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(51, 91, 84, .7); }
.pwn-moneda-modal__idioma-opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pwn-moneda-modal__idioma-opciones a {
	display: block; border: 1px solid rgba(51, 91, 84, .25); border-radius: 999px; padding: 11px 12px;
	background: var(--pawnia-crema-tarjeta); color: var(--pawnia-verde); text-decoration: none;
	font-family: var(--koi-font-texto); font-size: 15px; font-weight: 700;
}
.pwn-moneda-modal__idioma-opciones a:hover { background: var(--pawnia-lima); border-color: var(--pawnia-lima); }
.pwn-moneda-modal__idioma-opciones a.koi-idioma-activo { background: var(--pawnia-verde); border-color: var(--pawnia-verde); color: var(--pawnia-lima); }
.pwn-moneda-modal__idioma-opciones a.koi-idioma-sugerido:not(.koi-idioma-activo) { border-color: var(--pawnia-rosa); box-shadow: 0 0 0 2px var(--pawnia-rosa) inset; }
.koi-moneda-btn__idioma { padding-left: 8px; margin-left: 2px; border-left: 1px solid rgba(243, 234, 205, .4); }