/* ==========================================================================
   ChipMascotas — vista de escritorio
   --------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css (y de seo.css / checkout.css cuando aplica).

   REGLA DE ORO: todo lo que cambia el diseño vive dentro de
   `@media (min-width: 1024px)`. Por debajo de ese ancho no se aplica nada y
   el sitio queda EXACTAMENTE como está hoy en celular y tablet.

   Lo único que se declara fuera del media query son las piezas nuevas del
   encabezado de escritorio (logo y navegación), que nacen ocultas.
   ========================================================================== */

/* Piezas exclusivas del escritorio: en móvil no existen. */
.topbar__logo,
.topnav {
  display: none;
}

@media (min-width: 1024px) {
  :root {
    --shell-w: 1200px;
    --pad-x: 56px;
  }

  /* ----------------------------------------------------------------------
     1. Marco general
     ---------------------------------------------------------------------- */
  body {
    background-image: radial-gradient(
      120% 55% at 50% -10%,
      rgba(139, 92, 189, 0.45) 0%,
      transparent 62%
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .hero {
    align-items: start;
    padding: 30px 24px 0;
  }

  .hero__screen {
    max-width: var(--shell-w);
    min-height: min(700px, calc(100svh - 30px));
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    border-radius: 34px 34px 0 0;
  }

  /* ----------------------------------------------------------------------
     2. Barra superior con logo y navegación
     ---------------------------------------------------------------------- */
  .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    align-items: center;
    gap: 16px;
    padding: 22px 30px 0;
  }

  .topbar [data-menu-toggle] {
    display: none;
  }

  .topbar__logo {
    display: block;
    width: 172px;
    height: auto;
    flex: none;
  }

  .topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: auto;
  }

  .topnav a {
    padding: 9px 13px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(42, 22, 65, 0.72);
    white-space: nowrap;
    transition: background var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out);
  }

  .topnav a:hover {
    background: rgba(108, 58, 155, 0.09);
    color: var(--c-purple);
  }

  /* ----------------------------------------------------------------------
     3. Hero a dos columnas
     ---------------------------------------------------------------------- */
  .hero__intro {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 0;
    padding: 20px var(--pad-x) 4px;
    text-align: left;
  }

  /* El logo ya está en la barra superior */
  .hero__logo {
    display: none;
  }

  .hero__title {
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
    line-height: 1.02;
  }

  .hero__subtitle {
    max-width: 40ch;
    margin-top: 18px;
    font-size: 1.02rem;
    line-height: 1.5;
  }

  /* La foto ocupa la columna derecha de arriba abajo. Va en absoluto para que
     sus 753 px naturales no estiren las filas de la retícula. */
  .hero__stage {
    grid-column: 2;
    grid-row: 2 / 4;
    position: relative;
    align-items: stretch;
    min-height: 0;
    margin: 26px 0 0;
    overflow: hidden;
  }

  .hero__stage picture {
    position: absolute;
    inset: 0;
    height: auto;
  }

  /* `contain` + anclaje abajo: la foto conserva su encuadre (las mascotas
     apoyadas sobre la franja morada) y el aire de arriba es del mismo crema
     que el fondo del JPG, así que no se nota ninguna costura. */
  .hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
  }

  /* El panel morado pasa a ser una tarjeta de la columna izquierda */
  .hero__panel {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    align-items: flex-start;
    gap: 18px;
    margin: 26px var(--pad-x) 40px;
    padding: 30px 30px 32px;
    border-radius: 28px;
    text-align: left;
  }

  .hero__panel-title {
    font-size: 1.35rem;
  }

  .hero__panel-note {
    margin: 0;
  }

  /* ----------------------------------------------------------------------
     4. Secciones: mismo ancho que el hero
     ---------------------------------------------------------------------- */
  .catalog,
  .travel,
  .closing,
  .press,
  .site-footer {
    max-width: var(--shell-w);
  }

  /* ----------------------------------------------------------------------
     5. Catálogo: 3 columnas (una por categoría)
     ---------------------------------------------------------------------- */
  .catalog__band {
    padding-bottom: 17%;
  }

  .catalog__pup {
    bottom: 14%;
    width: 15%;
  }

  .catalog__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 30px;
    align-items: start;
    padding: 30px var(--pad-x) 56px;
  }

  .catalog__rating {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-bottom: 0;
  }

  .catalog__rating-note {
    margin: 0;
  }

  .category + .category {
    margin-top: 0;
  }

  /* Los tres encabezados ocupan el mismo alto para que las tarjetas arranquen
     a la misma altura aunque un título ocupe una o dos líneas. */
  .category__head {
    min-height: 76px;
    justify-content: flex-start;
  }

  .category__title {
    font-size: 1.5rem;
  }

  /* Nombre a dos líneas fijas: las seis tarjetas quedan parejas */
  .product__name {
    min-height: 2.7em;
  }

  .catalog__cta {
    grid-column: 1 / -1;
    margin-top: 0;
    justify-self: center;
    width: min(100%, 420px);
  }

  .catalog__promo {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 620px);
    margin: 0;
  }

  /* ----------------------------------------------------------------------
     6. Viajes · imagen a la izquierda, texto a la derecha
     ---------------------------------------------------------------------- */
  .travel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .travel__band {
    height: auto;
    min-height: 440px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .travel__dog {
    width: 66%;
    transform: translate(-50%, 0);
  }

  .travel__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px var(--pad-x);
    text-align: left;
  }

  .travel__eyebrow {
    margin-left: 0;
  }

  .travel__title {
    max-width: 16ch;
    margin-left: 0;
    font-size: 2.05rem;
  }

  .travel__text {
    max-width: 44ch;
    margin-left: 0;
    font-size: 0.98rem;
  }

  .travel__list {
    margin-top: 28px;
    gap: 12px;
  }

  /* ----------------------------------------------------------------------
     7. Cierre · texto a la izquierda, imagen a la derecha
     ---------------------------------------------------------------------- */
  .closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .closing__band {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    min-height: 460px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .closing__pet {
    width: 62%;
    transform: translate(-50%, 0);
  }

  .closing__body {
    grid-column: 1;
    grid-row: 1;
    padding: 56px var(--pad-x);
    text-align: left;
  }

  .closing__badge {
    width: min(42%, 180px);
    margin-left: 0;
  }

  .closing__title,
  .closing__text {
    margin-left: 0;
    max-width: 22ch;
  }

  .closing__text {
    max-width: 40ch;
    font-size: 0.98rem;
  }

  .reviews {
    max-width: 580px;
    margin-top: 34px;
  }

  .reviews__head {
    align-items: flex-start;
    text-align: left;
  }

  /* ----------------------------------------------------------------------
     8. Prensa · gato a la izquierda, logos a la derecha
     ---------------------------------------------------------------------- */
  .press {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: stretch;
  }

  .press__band {
    height: auto;
    min-height: 440px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .press__pet {
    width: 68%;
    transform: translate(-50%, 0);
  }

  .press__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px var(--pad-x);
  }

  .press__logos {
    gap: 10px;
  }

  .press__logos li {
    flex: 0 0 calc((100% - 40px) / 5);
    height: 58px;
  }

  /* ----------------------------------------------------------------------
     9. Footer en tres columnas
     ---------------------------------------------------------------------- */
  .site-footer {
    border-radius: 0 0 34px 34px;
  }

  .footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: 28px 56px;
    align-items: start;
    padding: 46px var(--pad-x) 28px;
  }

  .footer__brand {
    grid-column: 1;
  }

  .footer__cols {
    grid-column: 2;
    grid-row: 1 / 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
    margin-top: 0;
  }

  .footer__cols--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__social {
    grid-column: 1;
    margin-top: 0;
  }

  .footer__legal {
    grid-column: 1 / -1;
    margin-top: 4px;
    text-align: left;
  }

  /* ----------------------------------------------------------------------
     10. Páginas de contenido (legales, guías y fichas)
     ---------------------------------------------------------------------- */
  /* Páginas de lectura: se ensanchan para respirar, no para llenar la pantalla */
  .legal {
    max-width: 740px;
  }

  .legal.seo-page,
  .seo-page {
    max-width: 900px;
  }

  /* Ficha de producto: galería + compra a la izquierda, texto a la derecha */
  .legal.pp {
    max-width: 1120px;
  }

  .pp .legal__body {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: start;
    gap: 34px 48px;
  }

  .pp__media,
  .pp__dots {
    grid-column: 1;
  }

  .pp__buy {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 24px;
  }

  .pp .legal-card,
  .pp .legal__cta {
    grid-column: 1 / -1;
  }

  .pp__gallery {
    max-height: 620px;
  }

  /* Una foto a la vez: en dos columnas ya no hace falta "asomar" la siguiente */
  .pp__shot {
    flex-basis: 100%;
  }

  /* ----------------------------------------------------------------------
     11. Checkout
     ---------------------------------------------------------------------- */
  .co-page {
    padding: 40px 24px;
  }

  .co {
    max-width: 760px;
    margin: 0 auto;
    border-radius: 34px;
  }
}