/* ===========================
   Tailwind base y capas
   =========================== */
@tailwind base;

/* === Base (fuente y tokens) === */
@layer base {
  @font-face {
    font-family: "Century Gothic";
    src:
      url("../../Assets/fonts/CenturyGothic.woff2") format("woff2"),
      url("../../Assets/fonts/CenturyGothic.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  :root{
    /* Desktop por defecto */
    --topbar: 218px;                       /* altura fija del header desktop */
    --hero-h: clamp(680px, 45vw, 880px);
    --gutter: clamp(16px, 4vw, 48px);
    --radius: 20px;
  }

  html, body{
    font-family:"Century Gothic", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
      "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  }

  /* Hard-stop: evita scroll horizontal y 1px fantasma en SVG */
  html, body { 
    overflow-x: hidden; }
  svg { display: block; 
  }
}

@tailwind components;
@tailwind utilities;

/* ===========================
   Componentes reutilizables
   =========================== */
@layer components {
  /* Animaciones/hover comunes para las tarjetas SVG */
  .card-svg image{
    transition: transform .3s ease-out;
    transform-origin: center;
    transform-box: fill-box; /* clave en SVG */
  }

  /* Añadimos rect/path para transiciones */
  .card-svg path,
  .card-svg rect{
    transition: stroke .3s ease-out, stroke-width .3s ease-out, fill .3s ease-out;
  }

  /* Escala la imagen al hacer hover sobre la tarjeta */
  .card-svg:hover .clip-media image,
  .card-svg:hover image{
    transform: scale(1.1);
  }

  /* Ilumina cualquier trazo (path/rect) al hacer hover */
  .card-svg:hover path,
  .card-svg:hover rect{
    stroke: #fff;
    stroke-width: 2.5;
  }

  .sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* Borde de la tarjeta izquierda (el <rect id="card-left-path">) */
  #card-left-path{
    /* Nota: rx/ry NO son propiedades CSS; van como atributos en el SVG */
    fill: rgba(255,255,255,.06);
    stroke: rgba(255,255,255,.28);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  /* Hover específico para el borde de la tarjeta izquierda */
  #card-left:hover #card-left-path {
    stroke: #fff;
    stroke-width: 2.5;
  }
}

/* ===========================
   Responsive / Overrides
   =========================== */

/* Fallback: si por cualquier motivo no se aplica md:hidden,
   fuerza a ocultar las piezas móviles en ≥768px */
/* Forzar a ocultar TODO lo móvil en ≥768px (aunque falle Tailwind) */
@media (min-width: 768px){
  #masthead-mobile,                  /* <-- faltaba */
  header[data-variant="mobile"],
  #masthead-mobile img[aria-hidden="true"], /* logo decorativo */
  #masthead-mobile { display:none !important; }
  #hero-mobile {
    display: none !important;
  }
}

/* Móvil: tokens y pequeños ajustes */
/* Mobile: logo fijo por arriba, sin escalar; si no entra se corta por viewport */
@media (max-width: 767px){
  :root{
    --m-logo-h: 538.4px;  /* alto fijo del logo (ajústalo si quieres) */
    --m-logo-top: 14.6px; /* separación desde el borde superior del header */
  }

  /* Header móvil con altura fija y desbordamiento visible para el solape */
  header[data-variant="mobile"]{
    height: 88px !important;
    min-height: 88px !important;
    overflow: visible !important;
  }

  /* Punto ancla en la PARTE SUPERIOR del header, centrado */
  header[data-variant="mobile"] .m-logo-anchor{
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-175px);  /* offset horizontal de tu diseño */
    width: 0; height: 0;
    pointer-events: none; user-select: none;
  }

  /* El logo cuelga del ancla; tamaño FIJO, sin max-width */
  header[data-variant="mobile"] .m-logo{
    position: absolute !important;
    top: 20px!important; /* anclado ARRIBA del header */
    left: 0;
    height: var(--m-logo-h) !important;
    width: auto;
    max-width: none !important;   /* <-- evita el re-escalado de Tailwind */
    opacity: .95;
    pointer-events: none; user-select: none; -webkit-user-drag: none;
  }

  /* Evita scroll horizontal si el logo sobresale */
  html, body { overflow-x: hidden; }

  /* Respeta la zona segura (notch) en iOS */
  header[data-variant="mobile"]{
    padding-top: env(safe-area-inset-top);
  }

/* styles.css */
@media (max-width: 767px){
    :root{ --topbar: 88px; }
  }


  /* --- Footer: fila de enlaces legales en una sola línea --- */
  .footer-legal {
    display: flex;              /* una sola fila */
    align-items: center;
    justify-content: space-between; /* reparte por toda la fila */
    gap: 10px;                  /* separación mínima entre enlaces */
    white-space: nowrap;        /* no partir en varias líneas */
  }
  .footer-legal li { list-style: none; margin: 10; padding: 0; }
}