/* =======================================================================
   CC Tax — adaptación a tablet y mobile
   -----------------------------------------------------------------------
   El sitio se diseñó para desktop; este archivo sólo agrega reglas debajo
   de 1024px y no toca nada de lo que se ve en desktop.

   Especificidad: Tailwind por CDN inyecta su hoja DESPUÉS de esta, así que
   un selector de una sola clase pierde contra la utilidad. Por eso todo va
   con el prefijo :root, igual que el <style> de la página (0,2,0 contra
   0,1,0), sin !important.

   Sobre fondo oscuro la página usa el navy #071A40 y texto blanco en
   literal (no hay token para eso): el panel del menú sigue esa convención.

   Tramos:  ≤1023  aparece la hamburguesa (el nav es lg:flex)
            ≤767   layout a una columna
   ======================================================================= */


/* --- hamburguesa: fuera de mobile no existe ------------------------------ */
.nav-burger { display: none; }

@media (max-width: 1023px) {

  /* --- header ----------------------------------------------------------- */
  /* La grilla 1fr·auto·1fr centraba el nav; sin nav a la vista pasa a fila
     simple: logo a la izquierda y hamburguesa a la derecha.               */
  :root #site-header > div { display: flex; align-items: center; gap: 12px; }
  :root #site-header > div > a:first-child { margin-right: auto; }

  .nav-burger {
    display: grid; place-content: center; gap: 7px;
    width: 44px; height: 44px; margin-right: -10px;    /* área táctil sin correr la línea visual */
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--accent);
  }
  .nav-burger span {
    display: block; width: 24px; height: 1.5px; background: currentColor;
    transition: transform .45s cubic-bezier(.16,1,.3,1);
  }
  /* El panel tapa el fondo del header (va detrás de su contenido, no de su
     fondo), así que con el menú abierto el logo y la hamburguesa quedan
     sobre el navy: pasan a blanco mientras dura.                         */
  #site-header.menu-abierto .nav-burger { color: #fff; }
  :root #site-header.menu-abierto > div > a:first-child { color: #fff; }
  #site-header.menu-abierto .nav-burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
  #site-header.menu-abierto .nav-burger span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

  /* El menú es el mismo <nav> del desktop, desplegado como panel a pantalla
     completa detrás de la barra. Se oculta con opacidad + visibility y no
     con display, para que abra y cierre con la misma transición.          */
  :root #site-header nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; inset: 0; z-index: -1;
    padding: 104px 20px 40px;
    background: #071A40;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility .4s;
  }
  :root #site-header.menu-abierto nav { opacity: 1; visibility: visible; transform: none; }
  :root #site-header nav a:not(.nav-cta) {
    display: block; width: 100%; padding: 18px 0;
    font-size: 15px; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  /* El botón de contacto lo baja responsive.js al panel: en la barra quedan
     sólo el logo y la hamburguesa.                                        */
  :root #site-header nav .nav-cta {
    width: 100%; margin-top: 32px; padding: 16px 20px;
    justify-content: center; text-align: center; font-size: 13px;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  :root #site-header nav, .nav-burger span { transition: none; }
}


@media (max-width: 767px) {

  /* --- medianil --------------------------------------------------------- */
  /* px-7 (28px) es el medianil del sitio; en mobile baja a 20px. Al ser la
     misma utilidad en todas las secciones, se ajusta una sola vez.        */
  :root .px-7 { padding-left: 20px; padding-right: 20px; }
  :root .px-8 { padding-left: 20px; padding-right: 20px; }

  /* --- header ----------------------------------------------------------- */
  :root #site-header { padding-top: 18px; padding-bottom: 18px; }
  :root #site-logo { height: 30px; }
  :root #site-header.is-scrolled { padding-top: 12px; padding-bottom: 12px; }
  :root #site-header.is-scrolled #site-logo { height: 26px; }
  :root #site-header nav { padding-top: 92px; }
  /* el body reserva el alto del header extendido: 18+30+18 */
  :root body { padding-top: 66px; }

  /* El texto mínimo del sitio es 11,5px en desktop; en un teléfono se lee
     a la distancia del brazo y no baja de 12.                            */
  :root .text-\[11\.5px\], :root .eq-cargo { font-size: 12px; }

  /* Formularios: bajo 16px iOS hace zoom al enfocar el campo. */
  :root input, :root textarea, :root select { font-size: 16px; }


  /* ======================== HERO ======================================== */
  /* 100vh en iOS es el alto con la barra de Safari escondida, así que el
     hero se cortaba bajo la barra. svh es el alto visible real.          */
  :root #inicio > .hero-wipe {
    height: calc(100vh - 86px); height: calc(100svh - 86px);
    min-height: 460px; max-height: none;
  }
  :root #inicio { padding-bottom: 20px; }
  /* el corte estaba escrito para el ancho de desktop; el fuente deja un
     salto de línea después del <br>, así que ocultarlo no pega palabras  */
  :root #inicio h1 br { display: none; }
  /* El clamp del titular se apoya en vw: a 390px cae a su mínimo (18,4px) y
     la frase quedaba chica para ser lo único que hay en el hero.        */
  :root #inicio h1 { font-size: 23px; line-height: 1.3; margin-top: 22px; }
  :root #inicio .text-\[12\.5px\] { font-size: 12px; letter-spacing: .18em; }
  /* la barra de datos del pie del hero: en una columna y más compacta */
  :root #inicio .gap-x-16 { gap: 10px 20px; padding: 14px 20px; }
  :root #inicio .gap-x-16 p { font-size: 12px; }  /* piso de 12 en mobile */


  /* ======================== ÁREAS DE PRÁCTICA =========================== */
  /* Las cuatro columnas pasan a filas. La altura fija de 580px y el alto
     reservado de la bajada existen para que las cuatro midan lo mismo en
     fila; apiladas sobra y dejaría huecos enormes.                       */
  :root #areas > div { padding-top: 64px; padding-bottom: 72px; }
  :root .ap-grid { grid-template-columns: 1fr; margin-top: 32px; }
  :root .ap { height: auto; padding: 26px 20px 30px; }
  :root .ap-img { flex: none; min-height: 22px; }
  :root .ap-titulo { font-size: 19px; min-height: 0; }
  /* "Litigios<br>y Defensa" se cortaba para calzar en su columna; el fuente
     lleva ahora un espacio antes del <br>, invisible en desktop.         */
  :root .ap-titulo br { display: none; }
  :root .ap-num { font-size: 26px; }
  /* La línea del número cruza hasta el canto izquierdo de la pantalla: son
     los 20px de medianil de la sección más los 20 del relleno de la fila.
     overflow visible porque la columna recortaba lo que se sale.        */
  :root .ap { overflow: visible; }
  :root .ap-linea { flex: 1; width: auto; margin-left: -40px; }
  /* El barrido de entrada es un clip-path al borde de la columna y cortaba
     la línea justo donde se sale: se le abre el mismo margen.           */
  :root .ap-wipe { clip-path: inset(0 0 100% -40px); }
  :root .ap-wipe.is-in { clip-path: inset(0 0 0 -40px); }
  /* la bajada ya no vive del hover: en táctil no hay puntero que la suba */
  :root .ap-desc { height: auto; opacity: .8; font-size: 13.5px; }
  /* la línea divisoria era vertical entre columnas; apiladas va horizontal */
  :root .ap::after {
    top: auto; bottom: 0; left: 20px; right: 20px; width: auto; height: 1px;
  }


  /* ======================== EQUIPO ====================================== */
  :root #equipo > div { padding-top: 64px; padding-bottom: 72px; }
  /* Artículo: la foto deja de ir al lado y pasa arriba del título. Hay que
     anular col-start/row-start: en una grilla de una columna, un col-start-2
     crea una segunda columna implícita y el texto se saldría de la pantalla. */
  :root .art-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  :root .art-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  :root .art-grid .img-wipe { aspect-ratio: 4 / 3; }

  /* Blog: una sola columna y sin las reglas verticales, que a este ancho
     separarían nada. El listado y la fila de la portada comparten clase. */
  :root .blog-list { grid-template-columns: 1fr !important; row-gap: 44px; margin-top: 36px; }
  :root .blog-list > .line-grow { display: none; }
  :root .blog-list h2 { font-size: 21px; }
  :root #blog-listado { row-gap: 44px; }

  :root .team-list { grid-template-columns: 1fr; row-gap: 52px; margin-top: 36px; }
  :root .team-list > .line-grow { display: none; }
  /* el velo del hover se metía 42px en el medianil de al lado */
  :root .team-list .eq-velo { left: -10px; right: -10px; }
  :root .team-list .eq-nombre { font-size: 20px; }

  /* Modal de perfil: foto chica arriba y una sola columna. */
  :root #perfil-modal { padding: 12px; }
  :root #perfil-modal .pm-caja { padding: 28px 20px; max-height: 90vh; max-height: 90svh; }
  /* Pop-up: la foto se queda arriba a la izquierda y el nombre con el cargo
     corren a su derecha; el desarrollo baja a todo el ancho. Va con float y
     clear y no con grilla: la foto mide 187px de alto contra los ~90 del
     nombre más el cargo, y en una grilla ese sobrante estiraba las filas y
     abría un hueco entre los dos.                                        */
  :root #perfil-modal .pm-grid { display: block; }
  :root #perfil-modal .pm-foto { width: 140px; float: left; margin: 0 18px 16px 0; }
  :root #perfil-modal .pm-cuerpo,
  :root #perfil-modal .pm-grid span[aria-hidden] { clear: both; }
  :root #perfil-modal .pm-cerrar { top: 8px; right: 8px; width: 44px; height: 44px; }
  :root #perfil-modal h3 { font-size: 22px; padding-right: 32px; }


  /* ======================== FOOTER ====================================== */
  :root #contacto > div { padding-top: 56px; }
  :root #contacto .grid-cols-\[1fr_1px_1fr\] { grid-template-columns: 1fr; row-gap: 48px; }
  :root #contacto .line-grow { display: none; }
  :root #contacto .w-\[420px\] { width: 240px; }
  :root #contacto .mt-16.flex { margin-top: 40px; flex-direction: column; align-items: flex-start; gap: 32px; }
  :root #contacto form { margin-top: 28px; }
  :root #contacto [type="submit"] { width: 100%; }
}


/* --- tablet ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* cuatro columnas de ~170px dejaban los títulos en cuatro líneas */
  :root .ap-grid { grid-template-columns: 1fr 1fr; }
  :root .ap-desc { height: auto; }

  /* A este ancho caben dos tarjetas; la tercera baja. Las reglas verticales
     de la portada quedarían descolocadas, así que se ocultan. */
  :root .blog-list { grid-template-columns: 1fr 1fr !important; column-gap: 32px; row-gap: 44px; }
  :root .blog-list > .line-grow { display: none; }
}


/* --- touch: sin hover persistente -------------------------------------
   En una pantalla táctil el :hover queda pegado después del toque: las
   columnas quedaban atenuadas y la tocada en navy. Se anulan los efectos
   que dependen de pasar el puntero; los estados reales no cambian.      */
@media (hover: none) {
  :root .ap-grid:hover .ap { opacity: 1; }
  :root .ap:hover { background: var(--fondo); color: var(--accent); }
  :root .ap:hover .ap-linea { width: 20px; opacity: .45; background: currentColor; }
  :root .ap:hover .ap-icono { color: var(--accent); transform: none; }
  :root .team-list:hover article { opacity: 1; }
  :root .team-list article:hover .eq-velo { background-color: transparent; }
  :root .team-list article:hover .eq-nombre,
  :root .team-list article:hover .ver-perfil { color: var(--accent); }
  :root .team-list article:hover .eq-cargo { color: var(--accent); }
  :root .group:hover .group-hover\:scale-\[1\.06\] { transform: none; }
}