/** Shopify CDN: Minification failed

Line 7:0 Unexpected "/"

**/

/



















Petja clinicas · CSS
/* ==========================================================================
   PETJA — Clínicas colaboradoras
   Misma arquitectura que petja-guia-huella.css: portada oscura, franjas
   claras, cierre oscuro. Depende de petja-base.css (variables, tipografía,
   .petja-reveal, .petja-grain, .petja-btn).
   ========================================================================== */
 
.petja-clinicas{
  padding: 0;
}
 
/* --------------------------------------------------------------------------
   01 · Portada
   -------------------------------------------------------------------------- */
 
.petja-clinicas__hero{
  position: relative;
  background: var(--petja-carbon);
  color: var(--petja-bg);
  padding: clamp(120px, 18vw, 220px) 0 clamp(80px, 12vw, 140px);
  overflow: hidden;
}
 
.petja-clinicas__hero-inner{
  position: relative;
  z-index: 2;
  max-width: 860px;
  text-align: center;
}
 
.petja-clinicas__eyebrow{
  margin: 0 0 var(--petja-space-5);
}
 
.petja-clinicas__title{
  font-family: var(--petja-font-title);
  font-weight: 400;
  font-size: var(--petja-fs-3xl);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--petja-bg);
  margin: 0;
  max-width: 15ch;
  margin-inline: auto;
}
 
.petja-clinicas__subtitle{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-size: var(--petja-fs-md);
  line-height: 1.7;
  color: rgba(245, 242, 235, 0.72);
  max-width: 56ch;
  margin: var(--petja-space-6) auto 0;
}
 
/* --------------------------------------------------------------------------
   02 · Explicación
   -------------------------------------------------------------------------- */
 
.petja-clinicas__intro-wrap{
  background: var(--petja-bg);
  padding: clamp(80px, 11vw, 150px) 0 0;
}
 
.petja-clinicas__intro{
  max-width: 62ch;
}
 
.petja-clinicas__intro p{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-size: var(--petja-fs-base);
  line-height: 1.8;
  color: var(--petja-text-secondary);
  margin: 0 0 var(--petja-space-5);
}
 
.petja-clinicas__intro p:first-child{
  font-size: var(--petja-fs-md);
  line-height: 1.7;
  color: var(--petja-text);
}
 
.petja-clinicas__intro p:last-child{
  margin-bottom: 0;
}
 
/* --------------------------------------------------------------------------
   03 · Cómo funciona — fotografía pegajosa + momentos numerados
   -------------------------------------------------------------------------- */
 
.petja-clinicas__steps-wrap{
  background: var(--petja-bg);
  padding: clamp(56px, 8vw, 100px) 0 clamp(80px, 12vw, 150px);
}
 
.petja-clinicas__steps-title{
  margin: 0 0 clamp(48px, 6vw, 80px);
}
 
.petja-clinicas__steps-layout{
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
 
.petja-clinicas__steps-layout--solo{
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
 
.petja-clinicas__media{
  position: sticky;
  top: clamp(24px, 8vh, 90px);
}
 
.petja-clinicas__media-inner{
  position: relative;
}
 
.petja-clinicas__image{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: var(--petja-shadow-soft);
}
 
.petja-clinicas__caption{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-size: var(--petja-fs-xs);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--petja-text-secondary);
  margin: var(--petja-space-4) 0 0;
}
 
.petja-clinicas__steps{
  list-style: none;
  margin: 0;
  padding: 0;
}
 
.petja-clinicas__step{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid rgba(13, 13, 13, 0.10);
}
 
.petja-clinicas__step:first-child{
  border-top: 0;
  padding-top: 0;
}
 
.petja-clinicas__step-num{
  font-family: var(--petja-font-title);
  font-weight: 400;
  font-size: var(--petja-fs-xl);
  line-height: 1;
  color: var(--petja-gold-ink);
  min-width: 2ch;
}
 
.petja-clinicas__step-title{
  font-family: var(--petja-font-title);
  font-weight: 500;
  font-size: var(--petja-fs-lg);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--petja-text);
  margin: 0 0 var(--petja-space-3);
}
 
.petja-clinicas__step-text{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-size: var(--petja-fs-base);
  line-height: 1.8;
  color: var(--petja-text-secondary);
  margin: 0;
  max-width: 52ch;
}
 
.petja-clinicas__steps-note{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-style: italic;
  font-size: var(--petja-fs-sm);
  line-height: 1.7;
  color: var(--petja-text-secondary);
  max-width: 56ch;
  margin: clamp(40px, 5vw, 64px) 0 0;
}
 
/* --------------------------------------------------------------------------
   04 · Listado
   -------------------------------------------------------------------------- */
 
.petja-clinicas__list-wrap{
  background: var(--petja-bg-soft);
  padding: clamp(80px, 11vw, 150px) 0;
}
 
.petja-clinicas__list-title{
  margin: 0 0 clamp(40px, 5vw, 64px);
}
 
/* Rejilla fluida: 1 columna en móvil, 2 o 3 según quepa. Sin media queries
   propias — el auto-fit evita huecos raros cuando la lista crece de 3 a 9. */
.petja-clinicas__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  border-top: 1px solid rgba(13, 13, 13, 0.12);
}
 
.petja-clinicas__item{
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}
 
.petja-clinicas__name{
  margin: 0;
  font-family: var(--petja-font-title);
  font-weight: 500;
  font-size: var(--petja-fs-lg);
  line-height: 1.2;
  color: var(--petja-text);
}
 
.petja-clinicas__link{
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--petja-gold), var(--petja-gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.4s var(--petja-ease), color 0.3s var(--petja-ease);
}
 
.petja-clinicas__link:hover,
.petja-clinicas__link:focus-visible{
  color: var(--petja-gold-ink);
  background-size: 100% 1px;
}
 
.petja-clinicas__town{
  margin: var(--petja-space-2) 0 0;
  font-family: var(--petja-font-body);
  font-weight: 400;
  font-size: var(--petja-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--petja-text-secondary);
}
 
.petja-clinicas__sep{
  margin: 0 0.5em;
  color: var(--petja-gold-ink);
}
 
.petja-clinicas__empty{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-style: italic;
  font-size: var(--petja-fs-base);
  line-height: 1.8;
  color: var(--petja-text-secondary);
  max-width: 56ch;
  margin: 0;
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid rgba(13, 13, 13, 0.12);
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}
 
/* --------------------------------------------------------------------------
   05 · Cierre
   -------------------------------------------------------------------------- */
 
.petja-clinicas__cta-wrap{
  position: relative;
  background: var(--petja-carbon);
  padding: clamp(90px, 13vw, 170px) 0;
  overflow: hidden;
}
 
.petja-clinicas__cta{
  position: relative;
  z-index: 2;
  max-width: 680px;
  text-align: center;
}
 
.petja-clinicas__cta-title{
  font-family: var(--petja-font-title);
  font-weight: 400;
  font-size: var(--petja-fs-2xl);
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  color: var(--petja-bg);
  margin: 0;
}
 
.petja-clinicas__cta-text{
  margin: var(--petja-space-5) 0 0;
}
 
.petja-clinicas__cta-text p{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-size: var(--petja-fs-base);
  line-height: 1.8;
  color: rgba(245, 242, 235, 0.70);
  margin: 0 0 var(--petja-space-4);
}
 
.petja-clinicas__cta-text p:last-child{
  margin-bottom: 0;
}
 
.petja-clinicas__cta-btn{
  margin-top: var(--petja-space-7);
}
 
.petja-clinicas__cta-note{
  font-family: var(--petja-font-body);
  font-weight: 300;
  font-size: var(--petja-fs-xs);
  letter-spacing: 0.12em;
  color: rgba(245, 242, 235, 0.38);
  margin: var(--petja-space-6) 0 0;
}
 
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
 
@media (max-width: 899px){
  .petja-clinicas__title{
    max-width: none;
  }
 
  .petja-clinicas__steps-layout{
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 56px);
  }
 
  .petja-clinicas__media{
    position: static;
    max-width: 480px;
  }
}
 
@media (max-width: 599px){
  .petja-clinicas__step{
    grid-template-columns: 1fr;
    gap: var(--petja-space-3);
  }
}