/* Menú general de todo el sitio y menú interno de cada servicio.
   El menú general lo arma content-engine/nav.py (menu) para la home, las páginas de servicio, Paga aquí,
   las legales, el blog y /servicios/: un servicio nuevo se suma en nav.py SERVICIOS y aparece en todas.
   Los colores usan las variables de la página y caen a los de Homli donde no existen (blog). */

.isla {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: min(1100px, calc(100vw - 32px)); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 22px; background: rgba(250, 246, 242, .85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line, rgba(26, 20, 16, .08)); border-radius: 999px;
  box-shadow: 0 8px 32px -12px rgba(26, 20, 16, .14);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1;
}
.isla a { text-decoration: none; }
/* Todo lo que se toca en la isla mide al menos 44 por 44 px (skill ux-jiron, 29 de octubre de 2026). El dibujo no cambia:
   un pseudo-elemento invisible agranda el área que recibe el dedo. */
.isla-logo, .isla-login, .isla-usuario, .isla-carrito, .isla-cta, .isla-menu summary, .isla-m, .isla-idioma summary { position: relative; }
.isla-logo::before, .isla-login::before, .isla-usuario::before, .isla-carrito::before, .isla-cta::before,
.isla-menu summary::before, .isla-m::before, .isla-idioma summary::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
.isla-logo { display: flex; align-items: center; }
.isla-links { display: flex; align-items: center; gap: 28px; }
.isla-links a, .isla-menu summary, .isla-m {
  font-size: 14px; color: var(--ink-2, #2D2520); font-weight: 500; white-space: nowrap; transition: color 200ms ease;
}
.isla-links a:hover, .isla-links a[aria-current], .isla-menu summary:hover, .isla-m:hover, .isla-m[aria-current] { color: var(--coral-deep, #B8452B); }

/* Servicios: lleva a la sección de servicios de la home y al pasar el mouse muestra cada servicio */
.isla-servicios { position: relative; }
.isla-servicios > a { display: inline-flex; align-items: center; gap: 5px; }
.isla-drop {
  display: none; position: absolute; left: -16px; top: calc(100% + 18px); min-width: 230px; padding: 8px;
  background: var(--cream, #FAF6F2); border: 1px solid var(--line, rgba(26, 20, 16, .08)); border-radius: 18px;
  box-shadow: 0 18px 44px -18px rgba(26, 20, 16, .3);
}
.isla-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.isla-servicios:hover .isla-drop, .isla-servicios:focus-within .isla-drop { display: grid; gap: 2px; }
.isla-links .isla-drop a { padding: 11px 12px; border-radius: 12px; font-size: 14px; }
.isla-links .isla-drop a:hover, .isla-links .isla-drop a[aria-current] { background: var(--coral-whisper, #FDF1EC); }
/* Productos: el desplegable ocupa el ancho de la isla, con una columna por categoría */
.isla-productos { position: static; }
.isla-mega { left: 0; right: 0; top: calc(100% + 10px); padding: 20px 22px; }
.isla-productos:hover .isla-mega, .isla-productos:focus-within .isla-mega { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 14px; }
.isla-col { display: grid; gap: 1px; align-content: start; }
.isla-links .isla-mega a { padding: 6px 8px; font-size: 13.5px; white-space: normal; line-height: 1.3; }
.isla-links .isla-mega a.isla-col-t { color: var(--coral-deep, #B8452B); font-weight: 600; margin-bottom: 4px; }

.isla-acc { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
/* Iniciar sesión con el muñequito, y el nombre de quien ya entró (Emilio, 26 de octubre de 2026, como Avianca) */
.isla-login, .isla-usuario {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line, rgba(26, 20, 16, .14)); background: rgba(255, 255, 255, .6); cursor: pointer;
  font: 500 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--ink-2, #2D2520);
  transition: color 200ms ease, border-color 200ms ease;
}
.isla-login:hover, .isla-usuario:hover { color: var(--coral-deep, #B8452B); border-color: var(--coral, #EC6A4D); }
.isla-login[hidden], .isla-usuario[hidden] { display: none; }
.isla-usuario span { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.isla-usuario b { display: none; font-weight: 600; font-size: 13px; letter-spacing: .02em; }
/* Compra sin terminar en la caja de la app: el carrito con el punto coral de la campana de la app */
.isla-carrito {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line, rgba(26, 20, 16, .14)); background: rgba(255, 255, 255, .6); color: var(--ink-2, #2D2520);
  transition: color 200ms ease, border-color 200ms ease;
}
.isla-carrito:hover { color: var(--coral-deep, #B8452B); border-color: var(--coral, #EC6A4D); }
.isla-carrito[hidden] { display: none; }
.isla-carrito b {
  position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  box-sizing: border-box; border-radius: 999px; background: var(--coral-boton, #C24A30); color: #fff;
  font: 700 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Panel lateral de la cuenta: un dialog nativo, que trae el fondo, la tecla Esc y el foco atrapado */
.isla-cuenta {
  margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(380px, 100vw); max-width: 100vw; padding: 0; border: 0;
  background: var(--ink, #1A1410); color: var(--ink, #1A1410); box-shadow: -24px 0 60px -20px rgba(26, 20, 16, .35);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.isla-cuenta[open] { display: flex; flex-direction: column; animation: cuentaEntra 240ms cubic-bezier(.2, .8, .2, 1); }
.isla-cuenta::backdrop { background: rgba(26, 20, 16, .35); }
@keyframes cuentaEntra { from { transform: translateX(100%); } to { transform: none; } }
.isla-cuenta-cabeza { padding: 22px 24px 40px; color: var(--cream, #FAF6F2); }
.isla-cuenta-fila { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.isla-cuenta-marca { font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.isla-cuenta-x {
  width: 40px; height: 40px; margin-right: -8px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: inherit; font-size: 30px; line-height: 1;
}
/* Al abrir, el dialog enfoca la X: sin anillo con el mouse o el dedo, en coral con el teclado */
.isla-cuenta-x:focus:not(:focus-visible), .isla-cuenta-cabeza:focus { outline: none; }
.isla-cuenta-x:focus-visible { outline: 2px solid var(--coral, #EC6A4D); outline-offset: 2px; }
.isla-cuenta-hola { font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 8px; text-align: left; }
.isla-cuenta-sub { font-size: 14px; color: rgba(250, 246, 242, .7); margin: 0; text-align: left; }
/* La hoja clara sube sobre la cabecera con las esquinas de arriba redondeadas, como la de Avianca */
.isla-cuenta-hoja {
  flex: 1; display: flex; flex-direction: column; margin-top: -16px; padding: 8px 24px 28px;
  background: var(--cream, #FAF6F2); border-radius: 24px 24px 0 0;
}
.isla-cuenta-links { display: grid; }
.isla-cuenta-links a, .isla-cuenta-agendar summary {
  display: flex; cursor: pointer; align-items: center; justify-content: space-between; padding: 26px 4px; font-size: 17px; font-weight: 400;
  color: var(--ink, #1A1410); text-decoration: none; border-bottom: 1px solid var(--line, rgba(26, 20, 16, .1));
}
.isla-cuenta-links a:hover, .isla-cuenta-agendar summary:hover { color: var(--coral-deep, #B8452B); }
/* Agendar un servicio: se despliega como el menú de Servicios, con la flecha hacia abajo y hacia arriba al abrir */
.isla-cuenta-agendar summary { list-style: none; }
.isla-cuenta-agendar summary::-webkit-details-marker { display: none; }
.isla-cuenta-agendar summary svg { transform: rotate(90deg); transition: transform 200ms ease; }
.isla-cuenta-agendar[open] summary svg { transform: rotate(-90deg); }
.isla-cuenta-links .isla-cuenta-agendar div a { padding: 18px 4px 18px 18px; font-size: 16px; color: var(--ink-2, #2D2520); }
.isla-cuenta-salir {
  display: flex; align-items: center; gap: 16px; margin-top: auto; padding: 18px 4px 0; font-size: 16px;
  color: var(--ink, #1A1410); text-decoration: none;
}
.isla-cuenta-salir:hover { color: var(--coral-deep, #B8452B); }
@media (prefers-reduced-motion: reduce) { .isla-cuenta[open] { animation: none; } }
/* WhatsApp con borde y no relleno: el único primario de la primera pantalla es el de la página (ux-jiron, sección 1).
   El borde va como sombra interior para que el botón no cambie de tamaño. */
.isla-cta {
  background: transparent; color: var(--ink, #1A1410); box-shadow: inset 0 0 0 1.5px var(--ink, #1A1410);
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  transition: transform 150ms ease, color 200ms ease, background 200ms ease;
}
/* Al señalarlo se rellena de negro, como era antes (Emilio, 29 de octubre de 2026) */
.isla-cta:hover, .isla-cta:focus-visible { background: var(--ink, #1A1410); color: var(--cream, #FAF6F2); transform: scale(1.03); }
/* El WhatsApp flotante aparece después de bajar de la primera pantalla, para no competir con su botón (FAB en nav.py) */
.fab, .b-fab, .wa-fab { transition: opacity 200ms ease, transform 200ms ease, visibility 0s 0s; }
html:not(.fab-ver) :is(.fab, .b-fab, .wa-fab) {
  opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}
@media (prefers-reduced-motion: reduce) { .fab, .b-fab, .wa-fab, html:not(.fab-ver) :is(.fab, .b-fab, .wa-fab) { transition: none; } }

/* En el celular la isla tiene dos filas: arriba Homli y WhatsApp, abajo Servicios (que despliega un panel del
   ancho de la isla), Cómo funciona y Blog. Donde no cabe, Iniciar sesión pasa al final de ese panel.
   --isla-alto es lo que la página deja libre arriba (paginas.css, el blog y el menú interno lo usan). */
:root { --isla-alto: 92px; }
.isla-menu, .isla-m { display: none; }
.isla-menu summary.activo { color: var(--coral-deep, #B8452B); }
.isla-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 8px 2px; }
.isla-menu summary::-webkit-details-marker { display: none; }
.isla-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: grid; gap: 2px; padding: 10px;
  background: var(--cream, #FAF6F2); border: 1px solid var(--line, rgba(26, 20, 16, .08)); border-radius: 22px;
  box-shadow: 0 18px 44px -18px rgba(26, 20, 16, .3);
}
.isla-panel a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 13px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink, #1A1410); }
.isla-panel a:hover, .isla-panel a[aria-current] { background: var(--coral-whisper, #FDF1EC); color: var(--coral-deep, #B8452B); }
.isla-panel hr { border: 0; border-top: 1px solid var(--line, rgba(26, 20, 16, .08)); margin: 6px 14px; }
/* Ofrece tus servicios: en el escritorio junto a Iniciar sesión; en el celular, al final del panel de Servicios */
.isla-ofrece { font-size: 14px; font-weight: 500; color: var(--ink-2, #2D2520); white-space: nowrap; transition: color 200ms ease; }
.isla-ofrece:hover { color: var(--coral-deep, #B8452B); }
.isla-panel a.isla-panel-ofrece { color: var(--coral-deep, #B8452B); }
@media (max-width: 1020px) { .isla-links .isla-ofrece, .isla-acc > .isla-ofrece { display: none; } }

/* Idioma: ES | EN lleva a la misma página en el otro idioma (24 de octubre de 2026) */
.isla-idioma { position: relative; margin-right: 14px; font-size: 13px; font-weight: 600; }
.isla-idioma summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; color: var(--ink-2, #2D2520); }
.isla-idioma summary::-webkit-details-marker { display: none; }
.isla-idioma summary:hover, .isla-idioma[open] summary { background: var(--coral-whisper, #FDF1EC); }
.isla-idioma .bandera { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(26, 20, 16, .12); flex: none; }
.isla-idioma-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 2px; min-width: 150px; padding: 8px;
  background: var(--cream, #FAF6F2); border: 1px solid var(--line, rgba(26, 20, 16, .08)); border-radius: 16px;
  box-shadow: 0 18px 44px -18px rgba(26, 20, 16, .3);
}
.isla-idioma-lista a { display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 9px 10px; border-radius: 10px; color: var(--ink-2, #2D2520); text-decoration: none; font-weight: 500; font-size: 14px; }
.isla-idioma-lista a:hover { color: var(--coral-deep, #B8452B); }
.isla-idioma-lista a[aria-current] { background: var(--coral-whisper, #FDF1EC); color: var(--ink, #1A1410); }

@media (max-width: 760px) {
  :root { --isla-alto: 128px; }
  .isla-links { display: none; }
  .isla { top: 12px; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; border-radius: 24px; padding: 10px 12px 4px 18px; }
  .isla-acc { display: contents; }
  .isla-logo { order: 1; margin-right: auto; }
  /* En el celular solo el muñequito, arriba junto a WhatsApp; en coral cuando la persona ya entró */
  .isla-login, .isla-usuario { order: 2; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .isla-login span, .isla-usuario span { display: none; }
  .isla-carrito { order: 2; }
  /* Con el carrito no cabe todo en la primera fila: el idioma queda solo con la bandera y WhatsApp sin la flecha */
  .isla:has(.isla-carrito:not([hidden])) { column-gap: 6px; }
  .isla:has(.isla-carrito:not([hidden])) .isla-idioma summary { font-size: 0; gap: 0; }
  .isla:has(.isla-carrito:not([hidden])) .isla-idioma summary > svg:not(.bandera),
  .isla:has(.isla-carrito:not([hidden])) .isla-cta svg { display: none; }
  .isla:has(.isla-carrito:not([hidden])) .isla-cta { padding: 10px 12px; }
  .isla-usuario { background: var(--coral-boton, #C24A30); border-color: var(--coral-boton, #C24A30); color: #fff; }
  /* Con la sesión abierta, las iniciales en lugar del muñequito (Emilio, 26 de octubre de 2026) */
  .isla-usuario.con-iniciales svg { display: none; }
  .isla-usuario.con-iniciales b { display: inline; }
  .isla-idioma { order: 2; margin-right: 0; }
  .isla-cta { order: 3; padding: 10px 14px; }
  .isla::after { content: ''; order: 4; flex-basis: 100%; height: 1px; background: var(--line, rgba(26, 20, 16, .08)); margin-right: 6px; }
  .isla-menu, .isla-m { display: block; order: 5; }
  .isla-menu summary, .isla-m { padding: 9px 2px 10px; }
}

/* ---------- Menú interno de cada servicio: debajo del general, fijo al hacer scroll ---------- */
html:has(.subnav) { scroll-padding-top: calc(var(--isla-alto) + 58px); }
.subnav {
  position: sticky; top: calc(var(--isla-alto) - 4px); z-index: 90; width: min(1100px, calc(100vw - 32px)); box-sizing: border-box;
  margin: 0 auto 10px; display: flex; align-items: center; gap: 22px; padding: 6px 6px 6px 22px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line, rgba(26, 20, 16, .08)); border-radius: 999px;
  box-shadow: 0 8px 26px -16px rgba(26, 20, 16, .18);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1;
}
.subnav-rotulo {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep, #B8452B);
  font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.subnav-links { display: flex; gap: 22px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a {
  font-size: 14px; color: var(--ink-2, #2D2520); text-decoration: none; font-weight: 500; white-space: nowrap;
  padding: 9px 0; transition: color 200ms ease;
}
.subnav-links a:hover { color: var(--coral-deep, #B8452B); }
.subnav-cta {
  flex-shrink: 0; background: var(--coral-boton, #C24A30); color: #fff; border-radius: 999px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(236, 106, 77, .7); transition: background 200ms ease;
}
.subnav-cta:hover { background: var(--coral-deep, #B8452B); }
@media (max-width: 700px) {
  .subnav-rotulo { display: none; }
  .subnav { padding-left: 18px; gap: 14px; }
  .subnav-links { gap: 18px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}