/* ============================================================
   copernico.css — Estilos propios de Copérnico (no tocar main.css)
   ============================================================ */

/* ── Inter Tight autoalojada (sustituye la carga desde Google Fonts; evita
   enviar la IP del visitante a Google antes del consentimiento). Familia,
   pesos y unicode-range idénticos a los de Google: la tipografía no cambia. ── */
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/inter-tight/inter-tight-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/inter-tight/inter-tight-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:100 900; font-display:swap; src:url(../fonts/inter-tight/inter-tight-latin-italic.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter Tight'; font-style:italic; font-weight:100 900; font-display:swap; src:url(../fonts/inter-tight/inter-tight-latin-ext-italic.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Efecto glass del header, rescatado de la plantilla antigua
   (base bg-accent/60 antiguo, aclarado un 20% hacia el blanco opaco
   del header nuevo para mejorar el contraste con el fondo) */
.header-glass {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Las máscaras de SplitText (data-text-reveal) recortan los descendentes
   (g, y, p): el wrapper de máscara (clase real "text-mask-reveal-mask-line-mask")
   tiene overflow-y:clip y una altura = line-height (110%), que no deja sitio
   al descendente. El padding inferior extiende la zona de clip lo justo para
   la cola de la letra, y el margen negativo gemelo mantiene el interlineado.
   Durante la animación la línea va con opacity 0, así que no asoma nada. */
[data-text-reveal] [class*="line-mask"] {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* Caption de prueba social del hero (avatares + texto): el padre llevaba
   max-w-[254px] fijo, que estrangulaba el <p> a ~138px reales y partía mal
   la frase. Con max-content el bloque se ajusta a su contenido y sigue
   centrado con mx-auto; el salto exacto lo fuerza el <br> del HTML. */
.hero-social-proof {
  max-width: max-content;
}

/* Estado oculto de la barra mini-prompt al llegar al footer
   (!important para ganar al transform inline que gestiona GSAP) */
.mini-prompt-oculto {
  transform: translate(-50%, 150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Tarjetas de "Planes Empresa 360": la tarjeta conserva su altura fija
   (h-[425px]/xl:h-[510px]), pero la imagen cede el espacio que necesita el
   texto (flex + min-height:0 + object-cover). Así el copy nunca desborda en
   ningún tamaño sin agrandar la tarjeta; solo se recorta un poco la imagen en
   las tarjetas con más texto. min-h-0 no existe en el main.css compilado, por
   eso vive aquí. */
.pe360-card {
  display: flex;
  flex-direction: column;
}
.pe360-card > figure {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
.pe360-card > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Página legal (politica-legal.php): offset para que las anclas del sidebar
   no queden ocultas bajo el header fijo, y sidebar sticky en escritorio.
   scroll-mt-28 / top-28 no existen en el main.css compilado, por eso viven aquí. */
.legal-anchor {
  scroll-margin-top: 120px;
}
@media (min-width: 1024px) {
  .legal-sticky {
    position: sticky;
    top: 120px;
  }
}

/* Enlace activo del sidebar legal (scroll-spy gestionado en copernico.js).
   Reproduce el estado hover: texto secundario + fondo background-4. */
.legal-nav-link {
  border: 1px solid transparent;
}
.legal-nav-link.is-active {
  color: var(--color-secondary);
  background-color: var(--color-background-4);
  border-color: var(--color-stroke-1);
}

/* text-heading-3 no se compiló en main.css (la variable sí existe).
   Se usa para el precio de los planes. */
.text-heading-3 {
  font-size: var(--text-heading-3);
  line-height: var(--tw-leading, var(--text-heading-3--line-height));
}

/* Selector de plan del formulario de contacto — portado idéntico del bare-metal
   antiguo. Adaptado al template nuevo: sin variantes .dark y stroke-4 → stroke-3. */
.pricing-plan-select {
  position: relative;
  z-index: 50;
  overflow: visible;
}
.pricing-plan-select [data-pricing-plan-menu] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}
.pricing-plan-select[data-open="true"] [data-pricing-plan-menu] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.pricing-plan-select [data-pricing-plan-option]:hover,
.pricing-plan-select [data-pricing-plan-option][data-active="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-stroke-3);
}
.pricing-plan-select .pricing-plan-select-icon {
  opacity: 0;
  transform: scale(0);
}
.pricing-plan-select [data-pricing-plan-option]:hover .pricing-plan-select-icon,
.pricing-plan-select [data-pricing-plan-option][data-active="true"] .pricing-plan-select-icon {
  opacity: 1;
  transform: scale(1);
}

/* Selects nativos estilizados (appearance-none no está compilado en main.css).
   Añade la flecha propia para que combinen con los inputs del formulario. */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.05rem;
  transition: border-color 0.2s ease;
}
/* placeholder atenuado mientras no hay opción elegida */
.form-select:required:invalid {
  color: rgba(26, 26, 28, 0.5);
}
.form-select:focus {
  border-color: rgba(26, 26, 28, 0.55);
  outline: none;
}

/* Enlaces en línea dentro de textos de letra pequeña: el "Aviso sobre el uso
   de IA" (barra inferior del footer) y los "Términos y Condiciones" (casilla del
   formulario de contacto). El enlace hereda el color/opacidad del texto que lo
   rodea (p. ej. /60), solo va subrayado. En hover se quita esa atenuación y pasa
   al color pleno (más oscuro), sin negrita (la negrita descuadraría el texto). */
.legal-inline-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-inline-link:hover {
  color: var(--color-secondary);
}

/* Blanco atenuado al 80% para el texto del hero sobre el vídeo.
   text-white/NN no está compilado en main.css (solo el blanco pleno). */
.text-white-80 {
  color: rgba(255, 255, 255, 0.8);
}

/* ── Selector de prefijo telefónico con bandera redonda (formulario de contacto) ──
   Un contenedor unificado: a la izquierda el selector de país (bandera + +código),
   a la derecha el campo donde se escribe el número. La bandera es una imagen SVG
   redonda (set circle-flags en images/flags/); si aún no está, el círculo muestra
   las siglas del país como respaldo. */
.tel-field {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(26, 26, 28, 0.2);
  border-radius: 0.375rem;
  position: relative;
}
.tel-field:focus-within {
  border-color: rgba(26, 26, 28, 0.6);
}
.tel-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.6rem 0.75rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid rgba(26, 26, 28, 0.12);
}
.tel-number {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.75rem 1rem;
  color: rgba(26, 26, 28, 0.9);
}
.tel-number::placeholder {
  color: rgba(26, 26, 28, 0.6);
}
.tel-flag {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 9999px;
  flex: none;
  overflow: hidden;
  background-color: #e5e7eb;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6b7280;
}
.tel-code {
  font-size: 0.9rem;
  color: rgba(26, 26, 28, 0.9);
}
.tel-chevron {
  width: 0.9rem;
  height: 0.9rem;
  stroke: #8a8f99;
  flex: none;
  transition: transform 0.2s ease;
}
.tel-select[data-open="true"] .tel-chevron {
  transform: rotate(180deg);
}
.tel-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: 320px;
  max-width: 82vw;
  background: #fff;
  border: 1px solid var(--color-stroke-3);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tel-select[data-open="true"] .tel-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.tel-search-wrap {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(26, 26, 28, 0.08);
}
.tel-search {
  width: 100%;
  border: 1px solid rgba(26, 26, 28, 0.15);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  outline: 0;
  font-size: 0.9rem;
}
.tel-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 0.25rem;
}
.tel-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: 0;
}
.tel-option:hover,
.tel-option[data-active="true"] {
  background: var(--color-accent);
}
.tel-option-name {
  flex: 1 1 auto;
  font-size: 0.9rem;
  color: rgba(26, 26, 28, 0.9);
}
.tel-option-code {
  font-size: 0.85rem;
  color: rgba(26, 26, 28, 0.55);
}
.tel-option[hidden] {
  display: none;
}

/* ── Conmutador de idioma ES/EN (header) ──
   Fondo TRANSPARENTE: se ve el glass del propio header. Compacto. El segmento
   activo va en el negro de marca. Clases propias porque main.css es compilado. */
.lang-switch {
  position: relative; /* contenedor del knob deslizante */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-stroke-3);
  border-radius: 9999px;
  background-color: transparent;
  text-decoration: none;
}
/* Knob negro que se DESLIZA sobre ES/EN. Mismo negro/forma que antes; ahora, en
   vez de aparecer/desaparecer, se mueve con la curva de los botones normales. */
.lang-switch__knob {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 6px) / 2);
  border-radius: 9999px;
  background-color: var(--color-secondary);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-switch[data-lang="en"] .lang-switch__knob {
  transform: translateX(calc(100% + 2px));
}
.lang-switch__opt {
  position: relative; /* por encima del knob */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  /* poquito aire y equilibrado: 2px menos abajo compensa el hueco que dejan
     las mayúsculas sin descendentes (ES/EN), que parecía "caer" hacia arriba */
  padding: 6px 9px 4px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: rgba(26, 26, 28, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
/* etiqueta activa (con el knob debajo) en blanco, igual que antes */
.lang-switch[data-lang="es"] .lang-switch__opt[data-l="es"],
.lang-switch[data-lang="en"] .lang-switch__opt[data-l="en"] {
  color: #ffffff;
}
/* HOVER: el knob "va" al otro idioma al pasar el ratón (preview) y "vuelve" al
   salir, con la misma curva que los botones de la web. */
.lang-switch[data-lang="es"]:hover .lang-switch__knob {
  transform: translateX(calc(100% + 2px));
}
.lang-switch[data-lang="en"]:hover .lang-switch__knob {
  transform: translateX(0);
}
/* el texto blanco acompaña al knob a la etiqueta bajo la que queda */
.lang-switch[data-lang="es"]:hover .lang-switch__opt[data-l="es"],
.lang-switch[data-lang="en"]:hover .lang-switch__opt[data-l="en"] {
  color: rgba(26, 26, 28, 0.6);
}
.lang-switch[data-lang="es"]:hover .lang-switch__opt[data-l="en"],
.lang-switch[data-lang="en"]:hover .lang-switch__opt[data-l="es"] {
  color: #ffffff;
}

/* ============================================================
   Consentimiento de cookies (cookie-consent.js). Banner + modal de
   preferencias + botón flotante. Diseño con los tokens de la web y
   animaciones CSS nativas (sin librerías).
   ============================================================ */
.cc-lock { overflow: hidden; }

/* Banner */
.cc-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9998;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.cc-banner.cc-in { transform: translateY(0); opacity: 1; }
.cc-banner__box {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-stroke-3);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}
.cc-banner__icon {
  flex: none; width: 40px; height: 40px; border-radius: 9999px;
  background: var(--color-background-4); color: var(--color-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-banner__icon svg { width: 22px; height: 22px; }
.cc-banner__text { flex: 1 1 320px; min-width: 220px; }
.cc-banner__title { font-weight: 600; color: var(--color-secondary); font-size: 15px; margin: 0 0 2px; }
.cc-banner__desc { color: rgba(26, 26, 28, 0.6); font-size: 13.5px; line-height: 1.5; margin: 0; }
.cc-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Botones */
.cc-btn {
  font-family: inherit; font-size: 13px; font-weight: 500;
  border-radius: 9999px; padding: 9px 16px; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.cc-btn--solid { background: var(--color-secondary); color: #fff; }
.cc-btn--solid:hover { opacity: 0.9; }
.cc-btn--ghost { background: transparent; color: var(--color-secondary); border-color: var(--color-stroke-3); }
.cc-btn--ghost:hover { background: var(--color-background-4); }
.cc-link { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* Modal */
.cc-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 15, 20, 0.5);
  opacity: 0; transition: opacity 0.3s ease;
}
.cc-overlay.cc-in { opacity: 1; }
.cc-modal {
  width: 100%; max-width: 560px; max-height: 85vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; border: 1px solid var(--color-stroke-3);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  transform: scale(0.96); opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.cc-overlay.cc-in .cc-modal { transform: scale(1); opacity: 1; }
.cc-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color-stroke-3); }
.cc-modal__title { font-size: 18px; font-weight: 600; color: var(--color-secondary); margin: 0; }
.cc-modal__close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--color-secondary); cursor: pointer; padding: 0 4px; }
.cc-modal__body { padding: 20px 24px; overflow-y: auto; }
.cc-modal__intro { font-size: 13.5px; color: rgba(26, 26, 28, 0.6); line-height: 1.55; margin: 0 0 16px; }
.cc-modal__foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--color-stroke-3); }

/* Categoría + switch + detalle desplegable */
.cc-cat { padding: 14px 0; border-bottom: 1px solid var(--color-background-4); }
.cc-cat:last-child { border-bottom: 0; }
.cc-cat__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cc-cat__title { display: block; font-weight: 600; font-size: 14px; color: var(--color-secondary); }
.cc-cat__tag { display: inline-block; font-size: 10.5px; font-weight: 600; color: #15803d; background: rgba(21, 128, 61, 0.1); border: 1px solid rgba(21, 128, 61, 0.35); border-radius: 9999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.cc-cat__desc { display: block; font-size: 12.5px; color: rgba(26, 26, 28, 0.55); line-height: 1.5; margin-top: 2px; }
.cc-cat__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--color-secondary); font-size: 12.5px; font-family: inherit; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; }
.cc-cat__more:hover { opacity: 1; }
.cc-cat__chev { width: 14px; height: 14px; transition: transform 0.25s ease; }
.cc-cat.cc-open .cc-cat__chev { transform: rotate(180deg); }
.cc-cat__detail { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.cc-cat.cc-open .cc-cat__detail { max-height: 400px; }
.cc-cat__detail p { font-size: 12.5px; color: rgba(26, 26, 28, 0.6); line-height: 1.55; margin: 8px 0 2px; }
.cc-switch { position: relative; flex: none; width: 42px; height: 24px; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch__ui { position: absolute; inset: 0; border-radius: 9999px; background: var(--color-stroke-3); transition: background-color 0.2s ease; }
.cc-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; }
.cc-switch input:checked + .cc-switch__ui { background: var(--color-secondary); }
.cc-switch input:checked + .cc-switch__ui::after { transform: translateX(18px); }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-switch input:disabled + .cc-switch__ui { opacity: 0.55; }

/* Botón flotante (reabrir preferencias / revocar) */
.cc-fab {
  position: fixed; left: 18px; bottom: 18px; z-index: 9997;
  width: 44px; height: 44px; border-radius: 9999px;
  border: 1px solid var(--color-stroke-3);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--color-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
.cc-fab.cc-in { transform: scale(1); }
.cc-fab:hover { background: rgba(26, 26, 28, 0.035); }
.cc-fab svg { width: 22px; height: 22px; }

@media (max-width: 600px) {
  .cc-banner__actions { width: 100%; }
  .cc-banner__actions .cc-btn { flex: 1 1 auto; text-align: center; }
}

/* Tabla de cookies (sección Política de Cookies) — contenedor redondeado con la
   estética de la web, separaciones horizontales limpias y scroll en móvil. */
.legal-table-wrap { width: 100%; overflow-x: auto; margin-top: 10px; border: 1px solid var(--color-stroke-3); border-radius: 14px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.legal-table th, .legal-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-stroke-3); }
.legal-table thead th { background: var(--color-background-4); font-weight: 600; color: var(--color-secondary); white-space: nowrap; }
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table tbody tr:hover td { background: rgba(26, 26, 28, 0.02); }
.legal-table td:nth-child(4), .legal-table td:nth-child(5) { white-space: nowrap; }