:root{
      --coral:#E23B2E;
      --ink:#0B0B0C;
      --bg:#FFFFFF;
      --soft:#F2F2F2;
      --mid:#DADADA;
      --footer:#2E3B44;
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
      color:#222;
      background:#fff;
    }
    .phone{
      width:100vw;
      min-height:100vh;
      background:var(--bg);
      display:flex;
      flex-direction:column;
    }

    header{
      position:sticky; top:0; z-index:20;
      background:#0F0F0F;
      color:#fff;
      padding:14px 18px;
      display:flex;
      align-items:center;
      gap:14px;
    }
    .brand{ display:flex; align-items:center; gap:14px; flex:1; }
    .logo{ width:52px; height:52px;  display:grid; place-items:center; border-radius:6px; }
    .logo svg{width:34px; height:34px; fill:#0F0F0F}
    .brand-title{ line-height:1.02; letter-spacing:.06em; font-weight:800; text-transform:uppercase; font-size:26px; margin-left: auto;}
    .brand-title a{ color:inherit; text-decoration:none; }
    // sup menu
    .menu-wrap{ position:relative; }
    #menu-toggle{ position:absolute; inset:0; width:1px; height:1px; opacity:0; pointer-events:none; }
    .menu3{ width:34px; height:24px; display:grid; gap:6px; cursor:pointer; }
    .menu3 span{background:var(--coral); height:3px; border-radius:2px; display:block}

    .menu-panel{
      position:absolute; left:50; right:0; top:100%;
      background:#111; border-bottom:1px solid #2a2a2a;
      transform-origin:top; transform:scaleY(0);
      transition:transform .2s ease;
    }
    .menu-panel nav{ padding:10px 0; }
    .menu-panel a{ display:block; padding:14px 20px; color:#F3F6F8; text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .menu-panel a:hover{ background:#181818 }
    #menu-toggle:checked ~ .menu-panel{ transform:scaleY(1) }

/* bottom menu */
.menu-wrap-bot{ position:relative; }
#menu-toggle-bot{
  position:absolute; inset:0;
  width:1px; height:1px; opacity:0; pointer-events:none;
}
.menu3-bot{ width:25px; height:24px; display:grid; gap:6px; cursor:pointer; }
.menu3-bot span{ background:var(--coral); height:3px; border-radius:2px; display:block }

/* Panel anclado arriba del botón, expandiendo hacia arriba */
.menu-panel-bot{
  position:absolute;
  bottom:100%;          /* aparece por encima del botón */
  left:0;               /* pegado a la izquierda */
  margin-bottom: 45px;
  background:#111;
  border:1px solid #2a2a2a;
  transform-origin:bottom;
  transform:scaleY(0);
  transition:transform .2s ease;
  z-index:101;           /* sobre la barra inferior */
  min-width:260px;      /* ancho mínimo cómodo; ajusta si quieres */
  border-bottom:none;   /* al ir hacia arriba, el borde útil es el superior */
}
.menu-panel-bot nav{ padding:10px 0; }
.menu-panel-bot a{
  display:block; padding:4px 10px; color:#F3F6F8;
  text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
}

/* Enlace con flecha a la derecha */
.menu-panel-bot a.menu-item-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between; /* texto a la izquierda, flecha a la derecha */
  gap: 8px;
}

.menu-panel-bot a.menu-item-arrow .menu-arrow {
  width: 16px;
  height: 16px;
}

.menu-panel-bot a:hover{ background:#181818 }

/* FIX: este selector debe apuntar al panel inferior */
#menu-toggle-bot:checked ~ .menu-panel-bot{
  transform:scaleY(1);
}


    main{flex:1; overflow:auto}
    .content{ padding:24px 28px 130px; }
    h1{ margin:6px 0 14px; font-size:34px; line-height:1.16; font-weight:800; color:#0d0d0d }
    .lead{ font-size:22px; line-height:1.45; color:#3b3b3b }

    .frame{ margin:24px 0 0; background:var(--soft); border-radius:12px; width:95%; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--mid); }
    .img-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
    .img-ph svg{ width:78%; height:auto; opacity:.6 }

    .fab{
      position:fixed;              /* ahora flotan sobre la pantalla */
      bottom:100px;                 /* justo por encima del footer */
      width:70px;                  /* la mitad de 106px (redondeado) */
      height:70px;                 /* la mitad de 106px */
      border-radius:999px;
      background:#fff;
      box-shadow:0 10px 26px rgba(0,0,0,.18);
      display:grid;
      place-items:center;
      z-index:50;                  /* por encima del footer */
    }

    .fab.play{
      left:18px;                   /* separación cómoda del borde izquierdo */
    }

    .fab.ar{
      right:18px;                  /* separación cómoda del borde derecho */
    }

    .fab svg{
      width:36px;                  /* más pequeño para que se vea proporcionado */
      height:36px;
    }

    .bottom{ position:sticky; bottom:0; left:0; right:0; background:var(--footer); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:14px; z-index:100;}
    .hamb{position:relative; }
    .hamb span{position:relative; display:block; height:3px; background:#DDE5EB; border-radius:2px}

    .back{ width:54px; height:54px; border-radius:999px; border:3px solid #FFFFFF; display:grid; place-items:center; }
    .back svg{ width:24px; height:24px; fill:#FFFFFF }

    .room{ flex:1; font-weight:800; line-height:1.05; text-transform:uppercase; font-size:13px; }
    .next{ width:54px; height:54px; border-radius:999px; border:3px solid #FFFFFF; display:grid; place-items:center; }
    .next svg{ width:24px; height:24px; fill:#FFFFFF }

    @media (max-width:360px){
      .brand-title{font-size:22px}
      h1{font-size:28px}
      .lead{font-size:19px}
      .room{font-size:22px}
    }
/* ==== MODAL ENTRE HEADER Y FOOTER (SCROLLEABLE) ==== */

/* Checkbox que controla el modal */
#modal-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Capa del modal limitada entre header y footer */
.modal-backdrop{
  position:fixed;
  left:0;
  right:0;

  /* Ajusta estos valores si tu header/footer cambian de altura */
  top:76px;        /* altura aproximada del header */
  bottom:86px;     /* altura aproximada del footer */

  background:rgba(11,11,12,.72);
  display:flex;
  justify-content:center;
  align-items:stretch;       /* el panel ocupará toda la altura disponible */
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
  z-index:30;                /* sobre el contenido, por debajo de botones flotantes si los pones con más z-index */
}

/* Mostrar cuando el checkbox está activado */
#modal-toggle:checked + .modal-backdrop{
  opacity:1;
  visibility:visible;
}

/* Panel del modal */
.modal-panel{
  background:var(--bg);
  color:var(--ink);
  width:100%;
  max-width:480px;
  border-radius:18px;
  padding:18px 18px 20px;
  box-shadow:0 0 24px rgba(0,0,0,.45);

  /* Para que use toda la altura disponible entre header y footer */
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Cabecera fija dentro del modal */
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  flex-shrink:0;    /* no se encoge al hacer scroll */
}

.modal-title{
  margin:0;
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Botón de cerrar (label) */
.modal-close{
  border:none;
  background:transparent;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  color:var(--ink);
  padding:4px 6px;
}

/* Cuerpo scrolleable del modal */
.modal-body{
  flex:1;
  overflow-y:auto;        /* <- aquí está el scroll del contenido */
  padding-right:4px;      /* un poco de espacio para que no se pegue a la derecha */
  font-size:15px;
  line-height:1.5;
  color:#3b3b3b;
}

/* Botón para abrir el modal con estilo de la página */
.open-modal{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:2px solid ;
  background:#FFFFFF;
  color:var(--ink);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
}

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* === PROGRESS BAR AUDIO (VERSIÓN ANCHA Y PEGADA AL FOOTER) === */

.audio-progress {
  position: fixed;
  bottom: 86px;               /* EXACTAMENTE la altura del footer en tu diseño */
  left: 0;
  right: 0;
  height: 18px;               /* MÁS ALTA */
  background: var(--soft);
  border-top: 1px solid var(--mid);
  border-bottom: 1px solid var(--mid);

  z-index: 45;                /* por debajo de los botones flotantes */
}

.audio-progress-inner {
  height: 100%;
  width: 0%;
  background: var(--coral);
  transition: width 0.13s linear;
}

.audio-progress-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--bg);
  border: 3px solid var(--coral);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  left: 0%;
  transition: left 0.13s linear;
}

      /* Necesario para que Chrome permita arrastrar con pointer events */
#audio-progress,
#audio-progress * {
  touch-action: none;
}

/* Tabla de animales: grid de tarjetas 2 columnas */
.animals-table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0 16px;   /* sin espacio horizontal extra */
  margin: 24px 0;
  table-layout: fixed;      /* fuerza las columnas al 50% */
}


.animals-table td {
  width: 50%;
  vertical-align: top;
  padding: 0 6px;   /* un poco de aire dentro, sin romper el layout */
  box-sizing: border-box;
}


/* Tarjeta enlazada */
.animal-card {
  display: block;
  background: var(--soft);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--mid);
  text-decoration: none;
  color: inherit;
}

/* Imagen de la tarjeta */
.animal-card img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 4 / 3;     /* mantiene todas las cards con la misma altura */
  object-fit: contain;     /* muestra la imagen entera */
  object-position: center; /* centrada en el recuadro */
  background: var(--soft); /* “marcos” suaves donde sobre espacio */
}

.animal-card span {
  display: block;
  padding: 8px 10px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  overflow-wrap: normal;      /* permite cortar palabras largas */

}


/* Efecto hover/focus (sobretodo útil en desktop) */
.animal-card:hover,
.animal-card:focus-visible {
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* (Opcional) Si quieres ajustar sólo los espacios en pantallas pequeñas,
   pero manteniendo 2 columnas, usa algo como esto: */
@media (max-width: 480px) {
  .animals-table {
    border-spacing: 8px 10px;
  }
}