/* Páginas interiores (servicios y curso). Mobile-first; se apoyan en base.css y en los componentes «Cuaderno» de lifting.css. */

a.nav__brand { color: inherit; text-decoration: none; }
.pagina { position: relative; overflow: clip; min-height: 100vh; min-height: 100dvh; padding-top: 4.4rem; }
.servicios, .curso, .nosotras, .contacto { position: relative; z-index: 1; display: grid; gap: 1rem; justify-items: start; max-width: 40rem; margin: 0 auto; padding: 1.2rem 1.4rem 3rem; }
.servicios h1, .curso h1, .nosotras h1, .contacto h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.05; }
.servicios h2, .curso h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); line-height: 1.08; }
.servicios__txt, .curso__txt { margin: 0; font: 400 .95rem/1.5 var(--font-body); color: var(--olive-soft); max-width: 34rem; }

/* servicios */
.feat {
  position: relative; width: 100%; display: grid; grid-template-columns: 7.2rem 1fr; gap: .9rem; align-items: center; padding: .55rem; transform: rotate(-.8deg);
  background: #fff; border: 1.5px solid var(--olive); border-radius: 14px; box-shadow: 0 2px 20px rgb(0 0 0 / .08);
}
.feat img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; } /* height: auto: el atributo height="…" de la imagen pisaría la proporción */
.feat .sticker { top: -.8rem; left: .8rem; transform: rotate(-5deg); }
.feat h2 { font-size: 1.3rem; margin-bottom: .25rem; }
.feat .servicios__txt { margin-bottom: .6rem; }
.grp { width: 100%; display: grid; gap: .6rem; align-content: start; }
.grp > .hand { font-size: 1.2rem; }
.serv {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .35rem .8rem; align-items: start; width: 100%; padding: .85rem .9rem;
  border-radius: 14px; background: var(--paper); border: 1.5px solid var(--olive); color: var(--olive);
}
.serv .ic { width: 1.35rem; height: 1.35rem; margin-top: .1rem; }
.serv h3 { margin: 0; font: 600 1.02rem/1.2 var(--font-body); }
.serv__txt p { margin: .3rem 0 0; font: 400 .88rem/1.5 var(--font-body); color: var(--olive-soft); }
.serv__lado { grid-column: 2; display: flex; align-items: center; gap: .8rem; margin-top: .35rem; }
.serv__precio { font: 300 1.5rem/1 var(--font-head); letter-spacing: .01em; }
.serv .btn { margin-left: auto; padding: .65em 1.3em; font-size: .8rem; }
.serv:nth-of-type(odd) { rotate: -.5deg; } .serv:nth-of-type(even) { rotate: .5deg; }
.feat__precio { margin: 0 0 .7rem; font: 300 1.9rem/1 var(--font-head); letter-spacing: .01em; }

/* curso */
.curso .polaroid { width: min(100%, 16rem); transform: rotate(-1.6deg); margin: .3rem 0; }
.curso .polaroid img { aspect-ratio: 4 / 5; object-fit: cover; }
.curso__sub { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.1; color: var(--olive); }
.curso__cta { padding: .95em 1.6em; font-size: .95rem; }
.gain { display: grid; gap: .7rem; width: 100%; }
.gain .card { display: grid; gap: .25rem; }
.gain h3 { font-size: 1.02rem; }
.gain .card:nth-child(odd) { rotate: -.6deg; } .gain .card:nth-child(even) { rotate: .6deg; }
.curso__band { max-width: 40rem; margin: 1rem auto 0; position: relative; z-index: 1; }
.curso__band .btn { margin-top: .2rem; }

/* en horizontal: más ancho, servicios en dos columnas y las ventajas del curso en cuadrícula */
@media (min-aspect-ratio: 1/1) {
  .servicios, .curso, .nosotras, .contacto { max-width: 62rem; padding-left: clamp(1rem, 5vw, 4.5rem); padding-right: clamp(1rem, 5vw, 4.5rem); }
  .servicios .feat { max-width: 34rem; grid-template-columns: 9rem 1fr; }
  .servicios .grp { grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
  .servicios .grp > .hand { grid-column: 1 / -1; }
  .gain { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .curso .polaroid { width: 18rem; }
}

/* nosotras: foto de Mar y su texto */
.nosotras .polaroid { width: min(100%, 17rem); transform: rotate(-1.4deg); margin: .3rem 0; }
.nosotras .polaroid img { height: auto; aspect-ratio: 2 / 3; object-fit: cover; } /* height: auto: el atributo height="…" pisaría la proporción */
.nosotras__txt { display: grid; gap: .8rem; justify-items: start; }
.nosotras__txt p { margin: 0; font: 400 1rem/1.55 var(--font-body); color: var(--olive-soft); max-width: 36rem; }
.nosotras__txt p.hand { font: italic 500 1.35rem/1.2 var(--font-wm); color: var(--olive); }
.nosotras__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
@media (min-width: 56rem) {
  .nosotras { grid-template-columns: 20rem 1fr; column-gap: 3rem; align-items: start; justify-items: start; }
  .nosotras > .hand, .nosotras > h1 { grid-column: 1 / -1; }
  .nosotras .polaroid { width: 20rem; }
  .nosotras__txt { padding-top: .6rem; }
}
/* contacto: tres tarjetas */
.contacto__grid { display: grid; gap: .9rem; width: 100%; }
.contacto .card { display: grid; gap: .5rem; justify-items: start; }
.contacto .card h2 { font-size: 1.3rem; margin: 0; }
.contacto .card p { font: 400 .95rem/1.5 var(--font-body); color: var(--olive-soft); }
.contacto .card .btn { margin-top: .3rem; }
@media (min-width: 56rem) { .contacto__grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }