/* Propuesta 1 · Calma — luz de mañana, arena y oro, simetría y aire */
:root {
  --fondo: #FBF8F3;
  --arena: #EFE5D6;
  --texto: #2E2A25;
  --texto-suave: #6B6157;
  --acento: #A67C3E;
  --acento-hover: #8F6A33;
  --acento-texto: #fff;
  --salvia: #7E8C76;
  --suave: #D9CDBB;
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-texto: "Jost", system-ui, sans-serif;
  --radio: 2px;
}
body { font-weight: 300; }
.contenedor { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.estrecho { max-width: 720px; margin-inline: auto; }
.centro { text-align: center; }
.ante { font-size: .74rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--acento); }
.titulo { margin: .7rem 0 1.4rem; font-family: var(--f-display); font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 300; line-height: 1.12; }
.intro { font-family: var(--f-display); font-size: clamp(1.3rem, 2vw, 1.55rem); font-style: italic; line-height: 1.45; color: var(--texto-suave); margin-bottom: 1.4rem; }
section { padding-block: clamp(5rem, 11vw, 9rem); }

/* Cabecera */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 4vw, 3rem); transition: background .6s ease, padding .6s ease, box-shadow .6s ease; }
.cabecera--fija { padding-block: .6rem; background: rgba(251, 248, 243, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--suave); }
.marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marca__texto { display: grid; line-height: 1.1; }
.marca__texto strong { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.marca__texto small { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--acento); }

/* Portada */
/* El cielo de la foto se prolonga con un degradado de su mismo tono para dejar aire al titular */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; padding: 0; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 30%, #D2D5DD 0%, #CCCFD8 55%, #C1C5CF 100%); }
.hero__foto { position: absolute; inset: clamp(50px, 8vh, 90px) 0 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; animation: acercar 40s ease-out both; }
@keyframes acercar { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 16%; background: linear-gradient(to top, var(--fondo) 10%, rgba(251,248,243,0)); pointer-events: none; }
.hero__texto { position: relative; z-index: 1; align-self: start; width: min(880px, 100% - 2.5rem); margin: clamp(5.5rem, 11vh, 7.5rem) auto 0; text-align: center; }
.hero h1 { margin: .8rem 0 1rem; font-family: var(--f-display); font-size: clamp(2.3rem, 4.4vw, 3.7rem); font-weight: 300; line-height: 1.08; letter-spacing: -.01em; }
.hero__sub { font-family: var(--f-display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-style: italic; color: var(--texto-suave); }
.hero__acciones { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 0 1.25rem 1.2rem; }
.boton--claro { background: rgba(251,248,243,.75); backdrop-filter: blur(6px); }
.hero__bajar { position: relative; z-index: 1; justify-self: center; display: block; width: 1px; height: 44px; margin-bottom: .8rem; overflow: hidden; }
.hero__bajar span { position: absolute; inset: 0; background: linear-gradient(var(--acento), transparent); animation: gota 3.2s ease-in-out infinite; }
@keyframes gota { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (max-width: 760px), (max-aspect-ratio: 5/4) {
  .hero__foto { inset: auto; -webkit-mask-image: none; mask-image: none; }
  .hero { min-height: 0; grid-template-rows: auto; background: var(--fondo); }
  .hero__foto { position: relative; order: 2; }
  .hero__foto img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 30%; }
  .hero::after { display: none; }
  .hero__texto { margin-top: 6.5rem; }
  .hero__acciones { order: 1; padding-block: 1.4rem 2rem; }
  .hero__bajar { display: none; }
}

/* Piloto automático */
.piloto { text-align: center; padding-top: clamp(3rem, 6vw, 5rem); }
.piloto__lineas li { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 300; line-height: 1.6; }
.piloto__lineas li:last-child { font-style: italic; color: var(--acento); }
.piloto__cierre { max-width: 560px; margin: 3rem auto 0; color: var(--texto-suave); }

/* Pausa de respiración */
.pausa { background: var(--arena); text-align: center; }
.pausa h2 { font-family: var(--f-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 300; }
.pausa p { margin-top: .5rem; color: var(--texto-suave); }
.respira { position: relative; display: grid; place-items: center; width: min(320px, 78vw); aspect-ratio: 1; margin: 3rem auto 0; }
.respira__halo, .respira__circulo { position: absolute; border-radius: 50%; transition: transform 4s cubic-bezier(.45,0,.55,1), opacity 4s ease; }
.respira__halo { inset: 0; border: 1px solid var(--acento); opacity: .25; transform: scale(.62); }
.respira__circulo { inset: 22%; background: radial-gradient(circle at 40% 35%, #fff 0%, #F2E6D2 55%, #E4D2B5 100%); box-shadow: 0 20px 60px rgba(166,124,62,.18); transform: scale(.8); transition-duration: 6s; }
.respira.inhalando .respira__circulo { transform: scale(1.3); transition-duration: 4s; }
.respira.inhalando .respira__halo { transform: scale(1); opacity: .5; }
.respira:not(.inhalando) .respira__halo { transition-duration: 6s; }
.respira__texto { position: relative; font-family: var(--f-display); font-size: 1.4rem; font-style: italic; color: var(--acento); }

/* El cuerpo te habla */
.cuerpo { text-align: center; }
.cuerpo__senales { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 2rem 0; font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.cuerpo__senales span { color: var(--acento); }
.cuerpo__promesa { margin-top: 2rem; font-family: var(--f-display); font-size: 1.45rem; font-style: italic; color: var(--acento); }

/* Método y etapas */
.metodo { background: linear-gradient(var(--fondo), var(--arena) 30%, var(--arena) 70%, var(--fondo)); }
.metodo__verbos { display: flex; justify-content: center; flex-wrap: wrap; gap: .2rem 2.2rem; font-family: var(--f-display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--acento); }
.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin: 4.5rem 0 3rem; padding: 0; list-style: none; }
.etapa { position: relative; padding: 3.2rem 2rem 2.2rem; background: rgba(251,248,243,.85); border-top: 1px solid var(--acento); }
.etapa__num { position: absolute; top: -1.6rem; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid var(--acento); border-radius: 50%; background: var(--fondo); font-family: var(--f-display); font-size: 1.2rem; color: var(--acento); }
.etapa__ante { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--texto-suave); text-align: center; }
.etapa h3 { margin: .4rem 0 1rem; font-family: var(--f-display); font-size: 1.7rem; font-weight: 400; line-height: 1.15; text-align: center; }
.etapa__items { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0; }
.etapa__items li { padding: .2rem .8rem; border: 1px solid var(--suave); border-radius: 999px; font-size: .85rem; }
.etapa__resultado { font-family: var(--f-display); font-size: 1.15rem; font-style: italic; color: var(--acento); }
.metodo__cierre { max-width: 640px; margin: 0 auto; font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-style: italic; text-align: center; }
@media (max-width: 900px) { .etapas { grid-template-columns: 1fr; gap: 3rem; } }

/* Disciplinas */
.disciplinas { padding-top: 0; }
.disciplinas__foto { width: min(1400px, 100%); margin: 0 auto 5rem; }
.disciplinas__foto img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }
.disciplinas__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; text-align: center; }
.disciplinas__lista svg { width: 52px; height: 52px; margin: 0 auto 1.2rem; fill: none; stroke: var(--acento); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.disciplinas__lista h3 { font-family: var(--f-display); font-size: 2rem; font-weight: 400; }
.disciplinas__sub { margin-bottom: .8rem; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--acento); }
@media (max-width: 860px) { .disciplinas__lista { grid-template-columns: 1fr; } .disciplinas__foto img { aspect-ratio: 4 / 3; } }

/* Sobre mí */
.sobre { background: var(--arena); }
.sobre__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.sobre__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 240px 240px 2px 2px; }
.sobre__texto p + p { margin-top: 1rem; }
.sobre__dato { padding-left: 1.2rem; border-left: 1px solid var(--acento); }
.sobre__frase { margin-top: 2rem; font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-style: italic; line-height: 1.3; color: var(--acento); }
@media (max-width: 860px) { .sobre__grid { grid-template-columns: 1fr; } .sobre__foto { max-width: 420px; margin-inline: auto; } }

/* Qué incluye */
.incluye__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin: 3rem 0; }
.incluye__lista li { padding: 2.2rem; border: 1px solid var(--suave); text-align: center; }
.incluye__lista h3 { margin-bottom: .6rem; font-family: var(--f-display); font-size: 1.55rem; font-weight: 400; }
@media (max-width: 860px) { .incluye__lista { grid-template-columns: 1fr; } }

/* Opiniones */
.opiniones { padding-top: 0; }
.opiniones__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; margin-top: 3rem; }
.opiniones figure { position: relative; padding-top: 2.8rem; }
.opiniones figure::before { content: "“"; position: absolute; top: -1.2rem; left: 0; font-family: var(--f-display); font-size: 5rem; line-height: 1; color: var(--acento); opacity: .5; }
.opiniones blockquote { font-family: var(--f-display); font-size: 1.3rem; font-style: italic; line-height: 1.5; }
.opiniones figcaption { margin-top: 1rem; font-size: .85rem; letter-spacing: .06em; color: var(--texto-suave); }
.opiniones figcaption strong { font-weight: 500; color: var(--texto); }
@media (max-width: 760px) { .opiniones__grid { grid-template-columns: 1fr; } }

/* Respira La Toja */
.respira-toja { position: relative; overflow: hidden; background: linear-gradient(180deg, #E9EEE8 0%, #D5E0DA 100%); }
.respira-toja__ondas { position: absolute; inset: auto 0 0; width: 100%; height: 55%; fill: none; stroke: #fff; stroke-width: 1.2; opacity: .7; }
.respira-toja__ondas path { animation: ola 14s ease-in-out infinite alternate; }
.respira-toja__ondas path:nth-child(2) { animation-duration: 18s; opacity: .7; }
.respira-toja__ondas path:nth-child(3) { animation-duration: 22s; opacity: .5; }
@keyframes ola { to { transform: translateX(-60px) translateY(8px); } }
.respira-toja .contenedor { position: relative; }
.respira-toja__titulo { margin: .6rem 0 0; font-family: var(--f-display); font-size: clamp(3rem, 8vw, 6rem); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: #24443C; }
.respira-toja__titulo em { display: block; font-size: .55em; letter-spacing: .02em; text-transform: none; color: var(--acento); }
.respira-toja__fecha { margin: 1.4rem 0 .6rem; letter-spacing: .3em; font-size: .85rem; }
.respira-toja__lema { margin-bottom: 1rem; font-family: var(--f-display); font-size: 1.5rem; font-style: italic; }
.respira-toja__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.8rem 0 2.2rem; }
.respira-toja__tags li { padding: .25rem .9rem; border: 1px solid rgba(36,68,60,.25); border-radius: 999px; font-size: .82rem; }

/* Cita */
.cita blockquote p { font-family: var(--f-display); font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 300; font-style: italic; line-height: 1.3; }
.cita cite { display: block; margin-top: 1.2rem; font-size: .75rem; font-style: normal; letter-spacing: .26em; text-transform: uppercase; color: var(--acento); }

/* Contacto y pie */
.contacto { padding-top: 0; }
.contacto .intro { margin-bottom: 2.5rem; }
.pie { display: grid; justify-items: center; gap: 1rem; padding: 3.5rem 1.25rem 6rem; border-top: 1px solid var(--suave); text-align: center; font-size: .85rem; color: var(--texto-suave); }
.pie__marca { display: flex; align-items: center; gap: .8rem; text-align: left; }
.pie__marca strong { display: block; font-family: var(--f-display); font-size: 1.2rem; letter-spacing: .24em; text-transform: uppercase; color: var(--texto); }
.pie__marca span { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--acento); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
.pie__legal a { text-decoration: none; }

/* Aviso */
.aviso { --aviso-fondo: var(--fondo); border-top: 3px solid var(--acento); }