/* ============================================================
   CGAP · Responsive Home (index.html)
   ============================================================ */
@media(max-width:900px){.hs-cards-bar-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.hs-cards-bar-inner{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.hs-cards-bar-inner{grid-template-columns:1fr}}
@media(max-width:1024px){
  /* "Mobile" acá incluye tablets hasta 1024px (ej. iPad landscape). */
  .hero-static-row{flex-direction:column;height:auto;gap:24px}
  .hero-static-col{max-height:none}
  .hero-static-divider{display:none}
  .hero-static-left p{display:none}
  .hero-static-left,.hero-static-right{margin-left:clamp(1rem,9vw,6rem)}
  .hero-static-right{order:-1}
  /* El espacio de imagen+título se achica, pero el recorte se le saca
     entero a la card (no se lo queda el texto de abajo). */
  .prest-item--photo,a.prest-item--photo:hover{height:180px}
  .prest-img{height:70px}
  .prest-item--photo .ico{width:38px;height:38px}
  .prest-item--photo .ico svg{width:20px;height:20px}
  .prest-item--photo h3{top:1rem;left:calc(1rem + 38px + .6rem);right:1rem;min-height:38px;font-size:.92rem}
  .prest-item--photo p{font-size:.85rem}
  .prest-more{font-size:.75rem}
  /* Ícono y título en la misma fila; texto y link abajo, en columna,
     ocupando todo el ancho. */
  .prest-full{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "icon title"
      "icon divider"
      "text text"
      "link link";
    align-items:center;
    column-gap:.9rem;
    row-gap:.3rem;
    text-align:left;
  }
  .prest-full > div{display:contents}
  .prest-full .ico{grid-area:icon;width:42px;height:42px}
  .prest-full .ico svg{width:22px;height:22px}
  .prest-full h3{grid-area:title;margin:0;font-size:.88rem}
  .prest-full .prest-divider{grid-area:divider;margin:.2rem 0 0}
  .prest-full p{grid-area:text;font-size:.82rem}
  .prest-full .prest-more{grid-area:link}
  .rev-card{flex-basis:250px;padding:1.1rem 1.2rem;gap:.6rem}
  .rev-avatar-wrap{width:36px;height:36px}
  .rev-name{font-size:.85rem}
  .rev-date{font-size:.7rem}
  .rev-text{font-size:.86rem}
  .rev-stars{font-size:1.1rem}
  .rev-link{font-size:.78rem}
}
@media(max-width:1200px){
  /* Tablet y mobile: grilla de 2 columnas (2 2 2) en vez de 1 sola
     columna apilada, mismo mecanismo de reordenamiento con "order"
     que usa la versión desktop. */
  .prest-grid{grid-template-columns:repeat(2,1fr)}
  .prest-col{display:contents}
  .prest-item--photo[data-modal="gineco"]{order:1}
  .prest-item--photo[data-modal="labo"]{order:2}
  .prest-item--photo[data-modal="eco"]{order:3}
  .prest-item--photo[data-modal="estetica"]{order:4}
  .prest-full[data-modal="estudios"]{order:5}
  .prest-full[data-modal="recetas"]{order:6}
  .prest-full{align-self:stretch}
}
@media(max-width:770px){
  /* Con las cards más angostas (2 por fila) el texto ocupa más líneas
     y el link quedaba fuera de la card (cortado por overflow:hidden).
     Se le da más alto a la card para que todo el contenido entre. */
  .prest-item--photo,a.prest-item--photo:hover{height:210px}
  /* En celulares (no en tablets) se saca el formulario de contacto
     por tema de espacio; en tablet se conserva. */
  .gc-form{display:none}
  .contacto-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "left1" "left2" "midA" "midB" "right1" "right2";
  }
}
@media(max-width:610px){
  /* Se saca el ícono de al lado del título en todas las cards, y el
     título pasa a ocupar todo el ancho de la fila. */
  .prest-full .ico{display:none}
  .prest-full{grid-template-columns:1fr;grid-template-areas:"title" "divider" "text" "link"}
  .prest-item--photo .ico{display:none}
  .prest-item--photo h3{left:1rem}
}
@media(min-width:1201px){
  /* Desktop/notebook: sin hover en las 4 cards con foto (quedan siempre
     abiertas), reordenadas 4 arriba + las 2 violetas abajo en una sola
     fila cada grupo. La grilla se sale del .wrap y ocupa todo el ancho
     de pantalla (full-bleed) para aprovechar el espacio y agrandar las
     cards, con padding propio para que no queden pegadas a los bordes. */
  .prest-grid{
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    width:100vw;max-width:none;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding:0 180px;
  }
  .prest-col{display:contents}
  .prest-item--photo[data-modal="gineco"]{order:1}
  .prest-item--photo[data-modal="labo"]{order:2}
  .prest-item--photo[data-modal="eco"]{order:3}
  .prest-item--photo[data-modal="estetica"]{order:4}
  .prest-full[data-modal="estudios"]{order:5;grid-column:span 2}
  .prest-full[data-modal="recetas"]{order:6;grid-column:span 2}

  .prest-item--photo{height:188px}
  a.prest-item--photo:hover{height:188px;box-shadow:var(--shadow);transform:translateY(-4px)}
  a.prest-item--photo:hover .prest-img::after{background:rgba(10,6,15,.6)}
  .prest-img{height:68px;padding:1.1rem}
  .prest-item--photo .ico{width:42px;height:42px}
  .prest-item--photo h3{top:1.1rem;left:calc(1.1rem + 42px + .6rem);right:1.1rem;min-height:42px;font-size:1.1rem}
  .prest-body{padding:1.2rem 1.4rem .8rem;justify-content:flex-start}
  .prest-item--photo p{font-size:.88rem}
  .prest-item--photo .prest-more{margin-top:auto}
  .prest-item--photo[data-modal="labo"] .prest-img{background-position:center 80%}
  .prest-item--photo[data-modal="eco"] .prest-img{background-position:center 100%}

  .prest-full{width:88%;max-width:554px;min-height:150px;align-self:stretch;justify-self:center;gap:1.16rem;padding:1.27rem 1.85rem}
  .prest-full .ico{width:48px;height:48px}
  .prest-full .ico svg{width:25px;height:25px}
  .prest-full h3{font-size:1.27rem}
  .prest-full p{font-size:1.02rem}
  .prest-full[data-modal="estudios"]{transform:translateX(15px)}
  .prest-full[data-modal="recetas"]{transform:translateX(-15px)}
  a.prest-full[data-modal="estudios"]:hover{transform:translateX(15px) translateY(-4px)}
  a.prest-full[data-modal="recetas"]:hover{transform:translateX(-15px) translateY(-4px)}
}
@media(min-width:1201px) and (max-width:1560px){
  /* Entre 1201 y 1560px las 4 cards son mas angostas y el titulo mas
     largo ("Consultas y estudios ginecológicos") pasa a 2 líneas.
     Se le da mas ancho a la grilla (menos padding lateral) y se achica
     un poco el título — el alto de la card (215px) no se toca. */
  .prest-grid{padding:0 80px}
  .prest-item--photo h3{left:calc(1.1rem + 42px + .5rem);font-size:.92rem}
}
@media(max-width:600px){.faq-q>span:first-child{font-size:.94rem}.modal-card--wide{padding:1.6rem}}
@media(max-width:700px){.faq-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.faq-tiles{grid-template-columns:1fr}}