/*
Theme Name: Psico Ebased 2.0
Theme URI: https://psicoebased.com
Author: Araima (Versa)
Author URI: https://versa.com.uy
Description: Tema WordPress a medida para Psico Ebased — Lic. Carolina Morrone, psicóloga clínica especializada en ansiedad. Terapia online basada en evidencia. Paleta cálida (crema, marrón, rosa) con tipografía serif editorial. Clásico en PHP, con imágenes y enlaces editables desde el Personalizador.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: psico-ebased
Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready, one-column, wide-blocks
*/

/* Anton — clon libre (OFL) de Impact para el título RESET, autohosteado
   (Impact es fuente de sistema de Windows y no existe en móviles). */
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Anton-Regular.woff2") format("woff2");
}

/* =========================================================
   Fuentes locales (assets/fonts)
   ========================================================= */
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-Light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-LightItalic.otf") format("opentype");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-Italic.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-MediumItalic.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("../fonts/NeueMontreal-BoldItalic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Noto Serif Display ExtraCondensed";
	src: url("../fonts/Noto-Serif-Display-ExtraCondensed.ttf.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Aileron";
	src: url("../fonts/Aileron-Light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Aileron";
	src: url("../fonts/Aileron-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Aileron";
	src: url("../fonts/Aileron-Italic.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Aileron";
	src: url("../fonts/Aileron-SemiBold.otf") format("opentype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Aileron";
	src: url("../fonts/Aileron-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Aileron";
	src: url("../fonts/Aileron-BoldItalic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* =========================================================
   Design tokens
   ========================================================= */
:root {
	/* Hex muestreados del diseño de Canva (páginas exportadas a PNG) */
	--cream:        #fffdf0;
	--cream-2:      #fffefa;
	--cream-3:      #fefefe;
	--pink:         #fff0fb;
	--pink-2:       #fcedf8;
	--pink-btn:     #fddef5;
	--pink-btn-h:   #f8c9ec;
	--pink-card:    #fff7fd;
	--pink-card-2:  #fcedf8;
	--brown:        #4b302b;
	--brown-2:      #36221f;
	--brown-btn:    #4b302b;
	--brown-soft:   #65423b;
	--mauve:        #ccadcc;
	--taupe:        #c7b5a9; /* titulares del blog (sitio live) */
	--wine:         #730606;
	--rose-line:    #d7c2c0;
	--blue:         #d9e8f4;
	--blue-soft:    #edf7fe;
	--ink:          #211b18;
	--ink-2:        #3a3a3b;
	--text:         #4c433d;
	--muted:        #8a7f77;
	--line:         #ece3d6;

	--serif: "Noto Serif Display ExtraCondensed", Georgia, "Times New Roman", serif;
	--sans:  "Neue Montreal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--aileron: "Aileron", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--neue:  "Neue Montreal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--noto-condensed: "Noto Serif Display ExtraCondensed", "Noto Serif Display", Georgia, serif;

	--wrap: 1200px;
	--radius: 22px;
	--radius-pill: 999px;
}

/* =========================================================
   Base / reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.7;
	color: var(--text);
	background: var(--cream-3);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--serif);
	color: var(--ink);
	font-weight: 500;
	line-height: 1.08;
	margin: 0 0 .5em;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1.1em; }

.pe-container {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.pe-skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--brown); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.pe-skip-link:focus { left: 0; }

/* Shared type helpers */
.pe-eyebrow {
	font-family: var(--sans);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin: 0 0 .9rem;
}
.pe-eyebrow--light { color: rgba(255,255,255,.75); }
.pe-italic { font-style: italic; }

.pe-h1 { font-size: clamp(2.6rem, 5.7vw, 4.9rem); line-height: 1.02; letter-spacing: -0.02em; }
.pe-h2 { font-size: clamp(1.85rem, 3.1vw, 2.6rem); }
.pe-h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

.pe-lead { font-size: 1.08rem; color: var(--text); }
.pe-center { text-align: center; }
.pe-measure { max-width: 620px; }
.pe-measure-narrow { max-width: 520px; }

/* =========================================================
   Buttons
   ========================================================= */
.pe-btn {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 15px 30px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	line-height: 1;
	text-align: center;
}
.pe-btn:hover { transform: translateY(-2px); }
/* Los hovers repiten el color del texto: el a:hover azul de la base
   congelada de Hello Elementor le gana a la clase sola (a:hover pesa
   0,1,1 contra 0,1,0) y pintaba los botones de azul al pasar el mouse. */
.pe-btn--pink   { background: var(--pink-btn); color: var(--brown); }
.pe-btn--pink:hover,
.pe-btn--pink:focus { background: var(--pink-btn-h); color: var(--brown); }
.pe-btn--brown  { background: var(--brown-btn); color: #fff; }
.pe-btn--brown:hover,
.pe-btn--brown:focus { background: var(--brown-2); color: #fff; }
.pe-btn--outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.pe-btn--outline:hover { background: var(--ink); color: #fff; }
.pe-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.pe-btn--outline-light:hover { background: #fff; color: var(--brown); }

/* =========================================================
   Header / nav — ELIMINADO del port: el header es el global del sitio
   (header.php + pe-header.css, el mismo de la home). Las reglas de header
   del style.css 2.0 se quitaron para no pisarlo en /reset/.
   ========================================================= */

/* =========================================================
   Section scaffolding
   ========================================================= */
.pe-section { padding: clamp(56px, 8vw, 104px) 0; }
.pe-section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.bg-cream   { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-white   { background: var(--cream-3); }
.bg-pink    { background: var(--pink); }
.bg-pink-2  { background: var(--pink-2); }
.bg-blue    { background: var(--blue-soft); }
.bg-brown   { background: var(--brown); color: #fff; }
.bg-brown-2 { background: var(--brown-2); color: #fff; }
.bg-brown h1, .bg-brown h2, .bg-brown-2 h1, .bg-brown-2 h2 { color: var(--pink-btn); }
.bg-brown h3, .bg-brown-2 h3 { color: #fff; }

.pe-section__head { margin-bottom: 2.6rem; }

/* =========================================================
   Clover / flower motif
   ========================================================= */
.pe-clover { width: clamp(96px, 12vw, 148px); height: auto; aspect-ratio: 1; display: inline-block; fill: var(--blue); }
.pe-clover--brown { fill: var(--brown); }
.pe-clover--pink  { fill: var(--pink-btn); }
.pe-clover--sm { width: 72px; }

/* =========================================================
   HERO (home)
   ========================================================= */
/* Hero editorial (referencia: Squarespace "Quinn"): un solo color sobre crema,
   la palabra "calma" gigante repetida en líneas que sangran fuera del viewport,
   y la foto anclada a la derecha entrelazada con el texto: la primera línea
   pasa POR DELANTE de la foto y la segunda desaparece POR DETRÁS. */
.pe-hero {
	position: relative;
	background: var(--cream);
	min-height: min(88svh, 900px);
	padding: clamp(14px, 2.5vh, 28px) 0 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.pe-hero__contact {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.15rem, 1.9vw, 1.7rem);
	color: var(--brown);
	margin: 0 0 clamp(1.6rem, 4vh, 3.2rem);
}
.pe-hero__title { margin: 0; flex: 1; }
.pe-hero__kicker {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.4rem, 2.6vw, 2.3rem);
	color: var(--brown);
	padding-left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
	margin-bottom: .5rem;
}
.pe-hero__word {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(3.4rem, 10.8vw, 11.5rem);
	line-height: .92;
	letter-spacing: .005em;
	color: var(--brown);
	white-space: nowrap;
	position: relative;
	margin-left: -.04em;
	padding-left: 24px;
}
/* Ambas líneas por delante de la foto (el texto debe leerse completo);
   la segunda lleva sangría para el recorte escalonado de la referencia */
.pe-hero__word--over  { z-index: 3; }
.pe-hero__word--under { z-index: 3; padding-left: clamp(40px, 8vw, 150px); }
.pe-hero__word em { font-style: italic; color: var(--mauve); }
.pe-hero__media {
	position: absolute;
	margin: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: min(46vw, 640px);
	height: min(64%, 580px);
}
.pe-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.pe-hero__link {
	position: relative;
	z-index: 3;
	display: inline-block;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	color: var(--brown);
	margin: clamp(1.4rem, 3.5vh, 2.6rem) 0 clamp(1.6rem, 4vh, 3rem);
	border-bottom: 1px solid var(--brown);
	padding-bottom: .15em;
	transition: color .18s ease, border-color .18s ease;
}
.pe-hero__link:hover { color: var(--wine); border-color: var(--wine); }

/* Intro band under hero */
.pe-intro { text-align: center; }
.pe-intro .pe-eyebrow {
	font-family: var(--neue);
	font-weight: 500;
	font-size: clamp(.95rem, 1.5vw, 1.2rem);
	letter-spacing: .04em;
	color: var(--brown-soft);
	margin-bottom: 1.6rem;
}
.pe-intro .pe-eyebrow em { font-style: italic; }
.pe-intro__text {
	font-family: var(--neue);
	font-size: clamp(1.2rem, 2.1vw, 1.7rem);
	line-height: 1.4;
	max-width: 640px;
	margin: 0 auto 2rem;
	color: var(--brown-soft);
}
.pe-intro__text .hl { color: var(--mauve); font-style: normal; }

/* =========================================================
   Split (image + text)
   ========================================================= */
.pe-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}
.pe-split--reverse .pe-split__media { order: 2; }
.pe-split__media img { width: 100%; border-radius: 6px; }
.pe-split__media--full img { border-radius: 0; }
.pe-split__body { max-width: 520px; }

/* =========================================================
   "Sesiones 1:1 son para vos" checklist
   ========================================================= */
.pe-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.pe-checklist li {
	position: relative;
	padding-left: 26px;
	color: var(--text);
	font-family: var(--neue);
}
.pe-checklist li::before {
	content: "";
	position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--brown);
}

/* =========================================================
   Feature trio (clover icons)
   ========================================================= */
.pe-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 54px);
	text-align: center;
}
.pe-trio__item .pe-clover { margin-bottom: 1.1rem; }
.pe-trio__item h3 { font-size: 1.05rem; font-style: italic; }
.pe-trio__item p { font-size: .96rem; color: var(--text); }
/* Variante con etiquetas en sans bold (Formación, Qué incluye) */
.pe-trio--sans h3 {
	font-family: var(--sans);
	font-style: normal;
	font-weight: 700;
	font-size: .95rem;
	color: var(--ink-2);
}

/* =========================================================
   Pricing
   ========================================================= */
.pe-pricing {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.pe-price-card {
	background: var(--pink-card);
	border-radius: var(--radius);
	padding: 34px 26px 30px;
	display: flex;
	flex-direction: column;
	text-align: left;
	border: 1px solid rgba(0,0,0,.03);
}
.pe-price-card--accent { background: var(--pink-card-2); }
.pe-price-card__name { font-size: 1.5rem; font-style: italic; color: var(--ink-2); margin-bottom: .5rem; }
.pe-price-card__desc { font-size: .9rem; color: var(--muted); min-height: 3.6em; margin-bottom: 1rem; }
.pe-price-card__price { font-family: var(--sans); font-weight: 700; font-style: italic; font-size: 2rem; color: var(--ink-2); margin-bottom: 1.4rem; }
.pe-price-card .pe-btn { margin-top: auto; align-self: flex-start; background: #fff; }
.pe-price-card .pe-btn:hover { background: var(--brown); color: #fff; }

/* =========================================================
   Testimonial
   ========================================================= */
.pe-testimonial { text-align: center; }
.pe-testimonial__quote {
	font-family: var(--neue);
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	line-height: 1.55;
	color: var(--wine);
	max-width: 720px;
	margin: 0 auto 1.2rem;
}
.bg-brown .pe-testimonial__quote { color: #f6e9e2; }
.pe-testimonial__author { font-family: var(--neue); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: #b98a87; }

/* Slider de testimonios */
.pe-testi-slider {
	position: relative;
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 56px; /* lugar para las flechas */
}
.pe-testi-slider__track { display: grid; }
.pe-testi-slider__item {
	grid-area: 1 / 1; /* apilados: la altura la da el más alto, sin saltos */
	margin: 0;
	opacity: 0;
	transform: translateY(12px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
.pe-testi-slider__item.is-active {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
}
.pe-testi-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	line-height: 0;
	color: var(--brown);
	opacity: .5;
	transition: opacity .2s ease, transform .2s ease;
}
.pe-testi-slider__arrow svg { width: 38px; height: 28px; }
.pe-testi-slider__arrow--prev { left: 0; }
.pe-testi-slider__arrow--next { right: 0; }
.pe-testi-slider__arrow:hover,
.pe-testi-slider__arrow:focus-visible { opacity: 1; }
.pe-testi-slider__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.pe-testi-slider__arrow--next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 560px) {
	.pe-testi-slider { padding-inline: 0; padding-bottom: 54px; }
	.pe-testi-slider__arrow { top: auto; bottom: 0; transform: none; }
	.pe-testi-slider__arrow--prev { left: calc(50% - 58px); }
	.pe-testi-slider__arrow--next { right: calc(50% - 58px); }
	.pe-testi-slider__arrow--prev:hover { transform: translateX(-3px); }
	.pe-testi-slider__arrow--next:hover { transform: translateX(3px); }
}

/* =========================================================
   Big CTA band
   ========================================================= */
.pe-cta { text-align: center; }
.pe-cta__title { font-size: clamp(2.1rem, 4.3vw, 3.4rem); margin-bottom: .6rem; }
.pe-cta__title em { font-style: italic; }
.pe-cta__text { max-width: 520px; margin: 0 auto 1.8rem; }
.bg-brown .pe-cta__text, .bg-brown-2 .pe-cta__text { color: rgba(255,255,255,.85); }

/* Banda italic de Sesiones ("terapia psicologica online · ...") */
.pe-band {
	font-style: italic;
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	color: #fff;
	margin: 0;
}

/* Caja "Mi propósito" (Sobre mí) */
.pe-purpose {
	max-width: 680px;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3rem);
	border-inline: 1px solid var(--rose-line);
	text-align: center;
}
.pe-purpose h2, .pe-purpose p { color: var(--wine); }
.pe-purpose p { font-style: italic; margin-bottom: 0; }

/* =========================================================
   Cards grid (Lo que podes encontrar)
   ========================================================= */
.pe-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.pe-card {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: var(--cream);
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 6px 22px rgba(62,42,37,.06);
}
.pe-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(62,42,37,.12); }
.pe-card__img { aspect-ratio: 5/6; object-fit: cover; width: 100%; }
.pe-card__label { padding: 14px 16px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink); }

/* =========================================================
   RESET landing bits
   ========================================================= */
.pe-reset-hero { text-align: center; padding-top: clamp(40px,6vw,80px); }
.pe-reset-hero__title {
	/* Título RESET: Anton (clon libre de Impact, autohosteado) al frente,
	 * porque Impact solo existe como fuente de sistema en Windows y en
	 * móviles/producción caía al sans-serif genérico. */
	font-family: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-weight: 400;
	color: var(--pink-btn);
	font-size: clamp(6rem, 24vw, 19.5rem);
	line-height: .85;
	letter-spacing: 0;
	margin: 0;
}
.pe-reset-hero__sub { font-family: var(--neue); max-width: 620px; margin: 1.2rem auto 0; color: rgba(255,255,255,.85); }

.pe-two-col {
	columns: 2;
	column-gap: 48px;
}
.pe-two-col-list { list-style: none; margin: 0; padding: 0; }
.pe-two-col-list li { break-inside: avoid; margin-bottom: 1rem; padding-left: 22px; position: relative; }
.pe-two-col-list li::before { content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background: var(--brown); }

/* =========================================================
   FAQ / accordion
   ========================================================= */
.pe-faq { max-width: 760px; margin-inline: auto; }
.pe-faq__item { border-bottom: 1px solid var(--line); }
.pe-faq__q {
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	font-family: var(--serif); font-size: 1.2rem; color: var(--ink);
	padding: 22px 40px 22px 0; position: relative;
}
.pe-faq__q::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-family: var(--sans); font-size: 1.6rem; color: var(--brown); transition: transform .2s ease;
}
.pe-faq__item.is-open .pe-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.pe-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.pe-faq__a p { padding: 0 0 22px; color: var(--text); margin: 0; }

/* Acordeón de preguntas frecuentes de /contacto/ (details/summary, sin
   JS — mismo patrón que el FAQ de la landing Reset pero en fondo claro). */
.pe-contact-faq { max-width: 760px; margin-inline: auto; }
.pe-contact-faq details { border-bottom: 1px solid var(--line); }
.pe-contact-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 1.1rem 0;
	font-family: var(--serif);
	font-size: 1.1rem;
	color: var(--ink);
}
.pe-contact-faq summary::-webkit-details-marker { display: none; }
.pe-contact-faq summary::after {
	content: "+";
	font-family: var(--sans);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--brown);
	transition: transform .25s ease;
}
.pe-contact-faq details[open] summary::after { transform: rotate(45deg); }
.pe-contact-faq details > p {
	color: var(--text);
	line-height: 1.7;
	margin: 0;
	padding: 0 24px 1.2rem 0;
}

/* =========================================================
   Generic page content (blog / fallback)
   ========================================================= */
.pe-page-content { max-width: 760px; margin-inline: auto; }
.pe-page-content h1 { margin-bottom: .6em; }
.pe-post + .pe-post { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.pe-post__meta { color: var(--muted); font-size: .85rem; margin-bottom: 1rem; }

/* =========================================================
   Blog — archivo (grilla de tarjetas, como el sitio live)
   ========================================================= */
.pe-blog-head { text-align: center; }

.pe-blog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 34px);
	max-width: 1040px;
	margin-inline: auto;
}
.pe-blog-card { display: block; text-align: center; }
.pe-blog-card__media {
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
	background: var(--pink-2);
}
.pe-blog-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .65, .2, 1);
}
.pe-blog-card:hover .pe-blog-card__media img { transform: scale(1.05); }
.pe-blog-card__media .pe-clover { width: 64px; }
.pe-blog-card__title {
	margin: 1rem auto 0;
	max-width: 22ch;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.12rem;
	line-height: 1.3;
	color: var(--ink);
	transition: color .18s ease;
}
.pe-blog-card:hover .pe-blog-card__title { color: var(--brown); }

.pe-pagination { margin-top: clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.pe-pagination .nav-links { display: inline-flex; align-items: center; gap: .5rem; }
.pe-pagination .page-numbers {
	font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .1em;
	padding: .55em .95em; border-radius: var(--radius-pill); color: var(--ink);
	transition: background .18s ease;
}
.pe-pagination .page-numbers.current { background: var(--pink-btn); color: var(--brown); }
.pe-pagination a.page-numbers:hover { background: var(--cream); }

/* =========================================================
   Blog — entrada (columna angosta, titulares taupe)
   ========================================================= */
.pe-single { max-width: 640px; margin-inline: auto; }
.pe-single__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pe-single__title {
	font-size: clamp(1.9rem, 4.2vw, 2.7rem);
	font-weight: 600;
	color: var(--taupe);
	margin-bottom: .5rem;
}
.pe-single__meta {
	font-family: var(--sans); font-weight: 700; font-size: .72rem;
	letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
	margin: 0;
}
.pe-single__thumb { overflow: hidden; border-radius: 12px; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.pe-single__thumb img { width: 100%; }

.pe-entry-content { line-height: 1.85; color: var(--text); }
.pe-entry-content h2,
.pe-entry-content h3,
.pe-entry-content h4 { color: var(--taupe); margin-top: 2em; }
.pe-entry-content h2 { font-size: 1.7rem; }
.pe-entry-content h3 { font-size: 1.3rem; }
.pe-entry-content a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.pe-entry-content a:hover { color: var(--brown); }
.pe-entry-content img { border-radius: 10px; }
.pe-entry-content blockquote {
	margin: 2em 0;
	padding: .2em 0 .2em 1.4em;
	border-left: 2px solid var(--rose-line);
	font-family: var(--serif); font-style: italic; font-size: 1.12em;
	color: var(--brown-soft);
}
.pe-entry-content blockquote p { margin-bottom: .6em; }
.pe-entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; }
.pe-entry-content ul, .pe-entry-content ol { padding-left: 1.3rem; margin: 0 0 1.4em; }
.pe-entry-content li { margin-bottom: .5em; }
.pe-entry-content .wp-block-image { margin: 2em 0; }

/* Navegación entre entradas */
.pe-post-nav {
	max-width: 640px;
	margin: clamp(2.6rem, 5vw, 4rem) auto 0;
	padding-top: 1.8rem;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
}
.pe-post-nav a {
	display: block; max-width: 46%;
	font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.35;
	color: var(--ink);
	transition: color .18s ease;
}
.pe-post-nav a:hover { color: var(--brown); }
.pe-post-nav__label {
	display: block; margin-bottom: .35rem;
	font-family: var(--sans); font-style: normal; font-weight: 700;
	font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--muted);
}
.pe-post-nav__next { margin-left: auto; text-align: right; }

/* Banda de marca "PSICO.EBASED ——" (marquee lento, como divisor pre-footer) */
.pe-brand-strip {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 1.05rem 0;
	overflow: hidden;
	background: var(--cream-3);
}
.pe-brand-strip__track { display: flex; width: max-content; animation: pe-marquee 40s linear infinite; }
.pe-brand-strip__half { display: flex; }
.pe-brand-strip span {
	display: inline-flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem;
	font-family: var(--sans); font-weight: 600; font-size: .8rem;
	letter-spacing: .18em; color: var(--muted); white-space: nowrap;
}
.pe-brand-strip span::after { content: ""; width: 64px; height: 1px; background: var(--muted); opacity: .5; }
@keyframes pe-marquee { to { transform: translateX(-50%); } }

/* =========================================================
   WooCommerce (tienda / producto / carrito / checkout)
   ========================================================= */
/* Intro bajo el título del hero de producto Reset: ancho acotado para
   que el párrafo quiebre en dos líneas en desktop. */
.pe-woo .pe-product__intro {
	max-width: 62ch;
	margin-inline: auto;
}

.pe-woo .woocommerce-breadcrumb { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.2rem; }
.pe-woo .woocommerce-breadcrumb a { color: var(--muted); }
.pe-woo .woocommerce-breadcrumb a:hover { color: var(--brown); }

.pe-woo .product_title,
.pe-woo .woocommerce-products-header__title {
	font-family: var(--serif); font-weight: 600;
	font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.15; color: var(--ink);
}
.pe-woo .woocommerce-Price-amount { font-family: var(--sans); font-weight: 700; color: var(--brown); }
.pe-woo div.product p.price { font-size: 1.45rem; margin: 1rem 0 1.4rem; }
.pe-woo div.product .woocommerce-product-details__short-description { color: var(--ink-2); max-width: 52ch; }

.pe-woo .button,
.pe-woo button.button,
.pe-woo .single_add_to_cart_button,
.pe-woo .checkout-button,
.pe-woo #place_order {
	background: var(--brown-btn) !important; color: #fff !important;
	border: 0 !important; border-radius: 999px;
	padding: 14px 28px;
	font-family: var(--sans); font-weight: 600; font-size: .78rem;
	letter-spacing: .14em; text-transform: uppercase;
	transition: transform .18s ease, background .18s ease;
}
.pe-woo .button:hover,
.pe-woo button.button:hover,
.pe-woo .single_add_to_cart_button:hover,
.pe-woo .checkout-button:hover,
.pe-woo #place_order:hover { background: var(--brown-2) !important; color: #fff !important; transform: translateY(-2px); }

.pe-woo .quantity .qty { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .4rem; background: var(--cream-2); }
.pe-woo .onsale {
	background: var(--pink-btn); color: var(--brown);
	font-weight: 700; border-radius: 999px; padding: .3em 1em; font-size: .75rem;
}

/* Grillas de tienda */
.pe-woo ul.products li.product {
	background: #fff; border-radius: 18px; padding: 18px;
	box-shadow: 0 8px 22px rgba(62,42,37,.07);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pe-woo ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(62,42,37,.12); }
.pe-woo ul.products li.product img { border-radius: 12px; }
.pe-woo .woocommerce-loop-product__title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); }

/* Tabs / secciones del producto */
.pe-woo .woocommerce-tabs ul.tabs li a { font-family: var(--sans); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; color: var(--ink-2); }
.pe-woo .woocommerce-tabs .panel h2,
.pe-woo section.related > h2 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.5rem; color: var(--ink); }

/* Avisos */
.pe-woo .woocommerce-message,
.pe-woo .woocommerce-info,
.pe-woo .woocommerce-error {
	background: var(--pink-card); border-top-color: var(--brown);
	color: var(--ink); border-radius: 12px;
}
.pe-woo .woocommerce-error { border-top-color: #b3261e; }

/* Formularios de carrito/checkout */
.pe-woo .input-text,
.pe-woo select {
	border: 1px solid var(--line); border-radius: 10px;
	padding: .6rem .8rem; background: var(--cream-2);
	font-family: var(--sans); color: var(--ink);
}

/* Producto tipo servicio (sesiones) */
.pe-product__wrap { max-width: 820px; margin-inline: auto; }
.pe-product__title {
	font-family: var(--serif); font-weight: 600;
	font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
	color: var(--ink); margin: 0 0 1.2rem;
}
.pe-product__price { font-family: var(--sans); font-size: 1.5rem; font-weight: 700; color: var(--brown); margin: 0 0 1.8rem; }
/* Precio dentro de la línea "Título | Precio" (single Reset): misma serif del
   título; el color marrón lo sigue poniendo .pe-woo .woocommerce-Price-amount. */
.pe-woo .pe-product__title .woocommerce-Price-amount { font-family: var(--serif); font-weight: 600; }
.pe-product__price del { color: var(--muted); font-weight: 400; margin-right: .5em; }
.pe-product__meta { font-weight: 600; color: var(--ink); margin-bottom: 1.4rem; }
.pe-product__meta p { margin: 0 0 .4rem; }
.pe-product__desc { color: var(--ink-2); max-width: 68ch; }
.pe-product__desc p { margin: 0 0 1rem; }
.pe-product__desc ul { margin: .4rem 0 1.4rem; padding-left: 1.3rem; }
.pe-product__desc li { margin-bottom: .5rem; }
.pe-product__desc strong { color: var(--ink); }
.pe-product__cart { margin-top: 2.4rem; }
.pe-product__cart form.cart { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.pe-product__cart .quantity .qty { width: 4.2em; text-align: center; }

/* Bloqueo de compra con Calendly */
.pe-calendly-gate { margin-top: 2.4rem; }
.pe-calendly-gate__notice {
	background: var(--pink-card); border-left: 4px solid var(--brown);
	border-radius: 0 12px 12px 0; padding: 1rem 1.2rem;
	font-weight: 600; color: var(--ink); margin: 0 0 1.4rem;
}
.pe-calendly-gate__notice.is-ok { border-left-color: #6e9c3a; }
.pe-product__cart--gated { display: none; }
.pe-product__cart--gated.is-unlocked { display: block; }

/* =========================================================
   Contacto (formulario)
   ========================================================= */
.pe-contact-form { max-width: 560px; margin: 0 auto; text-align: center; }
.pe-contact-form__field,
.pe-contact-form .frm-fluent-form .ff-el-group { margin-bottom: 1.7rem; }
.pe-contact-form input[type="text"],
.pe-contact-form input[type="email"],
.pe-contact-form textarea,
.pe-contact-form .frm-fluent-form .ff-el-form-control {
	width: 100%; border: 0 !important; border-bottom: 1px solid var(--brown) !important; border-radius: 0 !important;
	background: transparent !important; padding: .5rem 2px; height: auto;
	font-family: var(--sans); font-size: .95rem; color: var(--ink);
	box-shadow: none !important; resize: vertical;
}
.pe-contact-form input::placeholder,
.pe-contact-form textarea::placeholder,
.pe-contact-form .frm-fluent-form .ff-el-form-control::placeholder { color: var(--ink-2); opacity: .85; }
.pe-contact-form input:focus,
.pe-contact-form textarea:focus,
.pe-contact-form .frm-fluent-form .ff-el-form-control:focus { outline: none; border-bottom: 2px solid var(--ink) !important; }
.pe-contact-form .frm-fluent-form .ff-el-input--label { display: none !important; }
.pe-contact-form .frm-fluent-form .ff_submit_btn_wrapper { text-align: center; }
.pe-contact-form__submit,
.pe-contact-form .frm-fluent-form .ff-btn-submit {
	border: 0 !important; background: none !important; cursor: pointer;
	font-family: var(--sans); font-size: .85rem !important; font-weight: 700 !important;
	letter-spacing: .22em; text-transform: uppercase; color: var(--brown) !important;
	padding: .4rem .6rem !important;
}
.pe-contact-form__submit:hover,
.pe-contact-form .frm-fluent-form .ff-btn-submit:hover { text-decoration: underline; text-underline-offset: 5px; }
.pe-contact-form .ff-message-success { font-size: .95rem; color: var(--brown); font-weight: 600; background: transparent; border: 0; box-shadow: none; }
.pe-contact-form__alt { margin-top: 3rem; }
.pe-contact-form__alt p { margin-bottom: 1rem; color: var(--ink-2); }

/* Footer del 2.0 ELIMINADO del port: el footer es global (footer.php + pe-footer.css) y estas reglas lo pisaban en /reset/ y /contacto/. */

/* =========================================================
   Animations (reveals al hacer scroll + micro-interacciones)
   ========================================================= */
/* Los estados ocultos solo aplican cuando JS marcó <html class="pe-anim">
   (ver psico_ebased_anim_flag). Sin JS todo el contenido queda visible. */
html.pe-anim .pe-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
	transition-delay: var(--pe-delay, 0s);
}
html.pe-anim .pe-reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* Entrada del hero (Inicio): la línea de contacto aparece, las dos líneas
   gigantes entran deslizándose en sentidos opuestos y la foto funde al final */
html.pe-anim .pe-hero__contact,
html.pe-anim .pe-hero__kicker,
html.pe-anim .pe-hero__link { animation: pe-fade-up .9s cubic-bezier(.16, 1, .3, 1) both; }
html.pe-anim .pe-hero__contact { animation-delay: .1s; }
html.pe-anim .pe-hero__kicker  { animation-delay: .2s; }
html.pe-anim .pe-hero__link    { animation-delay: .9s; }
html.pe-anim .pe-hero__word--over  { animation: pe-slide-left 1.1s cubic-bezier(.16, 1, .3, 1) .25s both; }
html.pe-anim .pe-hero__word--under { animation: pe-slide-right 1.1s cubic-bezier(.16, 1, .3, 1) .4s both; }
html.pe-anim .pe-hero__media { animation: pe-fade-in 1.2s ease .55s both; }
@keyframes pe-slide-left {
	from { opacity: 0; transform: translateX(.35em); }
	to   { opacity: 1; transform: none; }
}
@keyframes pe-slide-right {
	from { opacity: 0; transform: translateX(-.35em); }
	to   { opacity: 1; transform: none; }
}
@keyframes pe-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pe-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

/* Zoom suave de imágenes al pasar el mouse */
.pe-card__media { display: block; overflow: hidden; }
.pe-card__img { transition: transform .8s cubic-bezier(.2, .65, .2, 1); }
.pe-card:hover .pe-card__img { transform: scale(1.06); }

.pe-split__media { overflow: hidden; border-radius: 6px; }
.pe-split__media--full { border-radius: 0; }
.pe-split__media img { transition: transform .9s cubic-bezier(.2, .65, .2, 1); }
.pe-split__media:hover img { transform: scale(1.04); }

/* (keyframes pe-nav-in del 2.0 eliminado: manda pe-header.css) */

/* Accesibilidad: sin movimiento si el usuario lo pidió en su sistema */
@media (prefers-reduced-motion: reduce) {
	html.pe-anim .pe-reveal { opacity: 1; transform: none; transition: none; }
	html.pe-anim .pe-hero__contact,
	html.pe-anim .pe-hero__kicker,
	html.pe-anim .pe-hero__link,
	html.pe-anim .pe-hero__word--over,
	html.pe-anim .pe-hero__word--under,
	html.pe-anim .pe-hero__media { animation: none; }
	.pe-card__img, .pe-split__media img { transition: none; }
	.pe-card:hover .pe-card__img, .pe-split__media:hover img { transform: none; }
	.pe-testi-slider__item { transition: none; transform: none; }
	.pe-reset-hero-slider__slide { transition: none; }
	.pe-reset-timeline__items > li::after { animation: none; opacity: 0; }
	.pe-brand-strip__track { animation: none; }
	.pe-blog-card__media img { transition: none; }
	.pe-blog-card:hover .pe-blog-card__media img { transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
	.pe-pricing { grid-template-columns: repeat(2, 1fr); }
	.pe-cards   { grid-template-columns: repeat(2, 1fr); }
	.pe-blog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
	/* (reglas de header móvil del 2.0 eliminadas: manda pe-header.css) */
	.pe-hero { min-height: 0; }
	.pe-hero__word { font-size: clamp(2.4rem, 9.6vw, 6rem); white-space: normal; }
	.pe-hero__word--under { padding-left: 24px; }
	.pe-hero__media { position: static; width: 100%; height: auto; margin: 1.2rem 0 0; }
	.pe-hero__img { aspect-ratio: 4 / 3; height: auto; }
	.pe-split { grid-template-columns: 1fr; }
	.pe-split--reverse .pe-split__media { order: 0; }
	.pe-trio { grid-template-columns: 1fr; gap: 40px; }
	.pe-two-col { columns: 1; }
	.pe-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.pe-pricing { grid-template-columns: 1fr; }
	.pe-cards   { grid-template-columns: 1fr 1fr; }
	.pe-blog-grid { grid-template-columns: 1fr; max-width: 340px; }
	.pe-post-nav { flex-direction: column; }
	.pe-post-nav a, .pe-post-nav__next { max-width: 100%; text-align: left; margin-left: 0; }
	body { font-size: 16px; }
	.pe-hero__word { font-size: 11.5vw; }
}

/* =========================================================
   Ajustes para igualar el diseño de Canva (DAHNJ3nxKQM, pág. 4)
   — agregados sobre el style.css 2.0 portado tal cual —
   ========================================================= */

/* El header es el global del sitio: su CTA mantiene la fuente de
   pe-header.css aunque el .pe-btn genérico del 2.0 use Neue Montreal. */
.pe-header .pe-btn { font-family: var(--pe-sans); }

/* Títulos de sección más grandes, en escala con el diseño de Canva. */
.pe-reset .pe-h2 { font-size: clamp(2.6rem, 4.8vw, 3.9rem); }
/* El cierre oscuro va un punto más grande (dos líneas, como en Canva). */
.pe-reset .bg-brown .pe-h2 { font-size: clamp(2.9rem, 5.4vw, 4.4rem); }
/* Subtítulo del hero (debajo de RESET), más presente. */
.pe-reset .pe-reset-hero__sub {
	/* Proporción a la Calvagni: el subtítulo gana presencia (~29px tope)
	   frente a una CTA chica; antes la CTA pesaba más que el texto. */
	font-size: clamp(1.3rem, 2.2vw, 1.8rem);
	line-height: 1.45;
	max-width: 760px;
}

/* Formulario "Quiero agendar mi llamada" (Fluent Forms id 4), según el
   diseño de Figma (captura de la clienta): título serif marrón, labels
   serif, inputs celestes redondeados con placeholder y submit bordó. */
.pe-reset-form {
	max-width: 960px;
	margin-inline: auto;
	text-align: left;
}
.pe-reset-form__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
	color: var(--brown);
	text-align: center;
	margin: 0 0 2.4rem;
}
.pe-reset-form__title strong { font-weight: 700; }
.pe-reset-form .ff-t-container { column-gap: clamp(24px, 5vw, 60px); }
.pe-reset-form .ff-t-cell { flex-basis: 0 !important; flex-grow: 1; }
.pe-reset-form .ff-el-input--label label {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--brown);
}
.pe-reset-form .ff-el-form-control {
	width: 100%;
	border: 0;
	border-radius: 8px;
	background: var(--blue);
	padding: .65rem .9rem;
	font-family: var(--neue);
	font-size: .9rem;
	color: var(--ink);
	box-shadow: none;
}
.pe-reset-form .ff-el-form-control::placeholder {
	color: var(--ink-2);
	opacity: .75;
	font-size: .85rem;
}
.pe-reset-form .ff-el-form-control:focus {
	outline: none;
	background: #cfe2f2;
	box-shadow: 0 0 0 2px rgba(75, 48, 43, .2);
}
/* Submit: centrado, píldora bordó, amplio. Los !important pisan el estilo
   inline por-formulario que genera Fluent Forms (ffs_default). */
.pe-reset-form .ff_submit_btn_wrapper,
.pe-reset-form .ff-el-group.ff-text-left.ff_submit_btn_wrapper {
	text-align: center !important;
	margin-top: 2.2rem;
}
.pe-reset-form .ff-btn-submit,
.pe-reset-form button.ff-btn-submit.ff_btn_style {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 400;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 16px 56px !important;
	min-width: 250px;
	border-radius: var(--radius-pill) !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	background-color: #5e1214 !important;
	color: #ffffff !important;
	transition: transform .18s ease, background-color .18s ease;
}
.pe-reset-form .ff-btn-submit:hover,
.pe-reset-form .ff-btn-submit:focus,
.pe-reset-form button.ff-btn-submit.ff_btn_style:hover,
.pe-reset-form button.ff-btn-submit.ff_btn_style:focus {
	background-color: #4c0e10 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
}

/* Hero slider: crossfade en autoplay entre el título RESET y la foto de
   Caro (pe-reset.js). Los slides van superpuestos en absoluto; el alto lo
   fija el contenedor para que ambos midan lo mismo. */
.pe-reset-hero-slider {
	position: relative;
	overflow: hidden;
	/* Hero a pantalla completa; svh evita el salto de la barra de URL en
	   móviles. El piso protege al título/subtítulo en viewports bajitos. */
	height: 100vh;
	height: 100svh;
	min-height: 540px;
}
/* Doble clase para ganarle a la posición propia de cada slide
   (.pe-reset-photo es position:relative más abajo en este archivo). */
.pe-reset-hero-slider .pe-reset-hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 900ms ease;
	pointer-events: none;
}
.pe-reset-hero-slider .pe-reset-hero-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
/* Slide del título: contenido centrado en vertical (el padding-top de la
   sección original ya no aplica dentro del slider). */
.pe-reset-hero-slider .pe-reset-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
}
/* Slide de la foto: la imagen llena el slide completo. */
.pe-reset-hero-slider .pe-reset-photo picture {
	display: block;
	width: 100%;
	height: 100%;
}
.pe-reset-hero-slider .pe-reset-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* En mobile el slider deja de ocupar la pantalla completa: toma la
   proporción de reset-hero-mobile.jpg (496×606), así la foto entra
   entera a full width, sin recorte en los costados. */
@media (max-width: 767px) {
	.pe-reset-hero-slider {
		height: auto;
		min-height: 0;
		aspect-ratio: 496 / 606;
	}
}

/* "¿Qué es Reset?": fondo cuadrillé (vichy) celeste hecho con dos
   rayados semitransparentes cruzados — donde se superponen queda el
   cuadrito más oscuro, como en el diseño de la clienta. */
.pe-reset-que {
	background-color: #fff;
	background-image:
		repeating-linear-gradient(0deg, rgba(217, 232, 244, .6) 0 26px, transparent 26px 52px),
		repeating-linear-gradient(90deg, rgba(217, 232, 244, .6) 0 26px, transparent 26px 52px);
}
.pe-reset-que__inner { max-width: 680px; margin-inline: auto; }
.pe-reset-que__kicker {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--brown-soft);
	margin: 0 0 .3rem;
}
.pe-reset-que__inner .pe-h2 { margin: 0 0 1.6rem; }
/* El video va dentro de la sección, entre el título y los párrafos, más
   ancho que la columna de texto. */
.pe-reset-que .pe-reset-video__player { margin-block: .8rem 2.6rem; }
.pe-reset-que__inner p:not(.pe-reset-que__kicker) {
	color: var(--brown);
	line-height: 1.75;
	margin: 0 0 1.2rem;
}
.pe-reset-que__inner p:last-child { margin-bottom: 0; }

/* "El recorrido de Reset": timeline horizontal. El carril scrollea a lo
   ancho (rueda, drag o touch) y la línea se va completando con GSAP a
   medida que avanzás (pe-reset.js). */
.pe-reset-timeline__viewport {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	/* El primer item queda alineado con el contenido del pe-container. */
	padding-inline: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
}
.pe-reset-timeline__viewport::-webkit-scrollbar { display: none; }
.pe-reset-timeline__viewport:focus-visible {
	outline: 2px solid var(--brown-soft);
	outline-offset: -2px;
}
.pe-reset-timeline__viewport.is-dragging { cursor: grabbing; user-select: none; }
/* Modo pineado (GSAP ScrollTrigger): el carril lo mueve el transform, no
   el scroll nativo. */
.pe-reset-timeline__viewport.is-pinned { overflow: hidden; cursor: default; }
.pe-reset-timeline__track {
	position: relative;
	width: max-content;
}
.pe-reset-timeline__items {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(230px, 24vw, 290px);
	gap: clamp(32px, 4vw, 60px);
	width: max-content;
	list-style: none;
	margin: 0;
	padding: 0 40px 6px 0;
}
.pe-reset-timeline__items > li {
	position: relative;
	padding-top: 92px; /* reserva para número + punto + línea */
}
/* El punto de cada semana, sobre la línea (línea a top 64px). */
.pe-reset-timeline__items > li::before {
	content: "";
	position: absolute;
	top: 58px;
	left: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--rose-line);
	transition: background-color .4s ease;
}
.pe-reset-timeline__items > li.is-passed::before { background: var(--brown); }
/* Halo concéntrico que late detrás de cada punto (estilo hotspot de
   cascarstudio.com): mismo centro que el punto, escala hacia afuera y se
   desvanece en loop. Desfasado por item para que no pulsen en bloque. */
.pe-reset-timeline__items > li::before { z-index: 1; }
.pe-reset-timeline__items > li::after {
	content: "";
	position: absolute;
	top: 58px;
	left: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--rose-line);
	opacity: 0;
	pointer-events: none;
	animation: pe-tl-pulse 2.6s ease-out infinite;
	transition: background-color .4s ease;
}
.pe-reset-timeline__items > li.is-passed::after { background: var(--brown); }
.pe-reset-timeline__items > li:nth-child(2n)::after { animation-delay: .45s; }
.pe-reset-timeline__items > li:nth-child(3n)::after { animation-delay: .9s; }
.pe-reset-timeline__items > li:nth-child(4n)::after { animation-delay: 1.35s; }
@keyframes pe-tl-pulse {
	0%   { transform: scale(1); opacity: .45; }
	70%  { transform: scale(3); opacity: 0; }
	100% { transform: scale(3); opacity: 0; }
}
.pe-reset-timeline__num {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 2rem;
	line-height: 1;
	color: var(--taupe);
	transition: color .4s ease;
}
.pe-reset-timeline__items > li.is-passed .pe-reset-timeline__num { color: var(--brown); }
.pe-reset-timeline__items h3 {
	font-family: var(--neue);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--brown);
	margin: 0 0 .4rem;
}
.pe-reset-timeline__items p {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--text);
	margin: 0;
}
.pe-reset-timeline__line {
	position: absolute;
	top: 64px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--rose-line);
	pointer-events: none;
}
.pe-reset-timeline__line-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--brown);
}

/* "Soy Caro" + FAQ (fondo marrón). La foto lleva un marco festoneado
   hecho con máscara CSS: un rectángulo interior + una grilla de círculos
   cuya unión dibuja las "nubes" del borde, como en el diseño. */
.pe-reset-caro__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
	max-width: 1080px;
	margin-inline: auto;
}
.pe-reset-caro__media { position: relative; }
.pe-reset-caro__media > img:first-child {
	display: block;
	width: 100%;
	/* Proporción natural de reset-caro.png (537×791): sin recorte. */
	aspect-ratio: 537 / 791;
	object-fit: cover;
	--pe-scallop: 56px;
	-webkit-mask-image:
		linear-gradient(#000 0 0),
		radial-gradient(circle, #000 62%, transparent 63%);
	-webkit-mask-size:
		calc(100% - var(--pe-scallop)) calc(100% - var(--pe-scallop)),
		var(--pe-scallop) var(--pe-scallop);
	-webkit-mask-position: center, 0 0;
	-webkit-mask-repeat: no-repeat, round;
	mask-image:
		linear-gradient(#000 0 0),
		radial-gradient(circle, #000 62%, transparent 63%);
	mask-size:
		calc(100% - var(--pe-scallop)) calc(100% - var(--pe-scallop)),
		var(--pe-scallop) var(--pe-scallop);
	mask-position: center, 0 0;
	mask-repeat: no-repeat, round;
}
.pe-reset-caro__badge {
	position: absolute;
	top: 2%;
	left: -8%;
	width: clamp(64px, 7vw, 92px);
	transform: rotate(-8deg);
}
.pe-reset-caro__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.7rem);
	line-height: 1.2;
	color: #f6e9e2;
	margin: 0 0 1.4rem;
}
.pe-reset-caro__bio { margin: 0 0 2.4rem; }
.pe-reset-caro__bio p {
	color: rgba(255, 255, 255, .85);
	line-height: 1.7;
	margin: 0 0 1.1rem;
}
.pe-reset-caro__bio p:last-child { margin-bottom: 0; }
.pe-reset-caro__eyebrow,
.pe-reset-caro__faq-label {
	font-family: var(--neue);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .78rem;
	color: #f6e9e2;
	margin: 0 0 .4rem;
}
.pe-reset-caro__faq details {
	border-bottom: 1px solid rgba(246, 233, 226, .3);
}
.pe-reset-caro__faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: .95rem 0;
	color: #f6e9e2;
	font-size: .98rem;
}
.pe-reset-caro__faq summary::-webkit-details-marker { display: none; }
.pe-reset-caro__faq summary::after {
	content: "+";
	font-family: var(--neue);
	font-size: 1.1rem;
	line-height: 1;
	transition: transform .25s ease;
}
.pe-reset-caro__faq details[open] summary::after { transform: rotate(45deg); }
.pe-reset-caro__faq details > p {
	color: rgba(255, 255, 255, .8);
	font-size: .95rem;
	line-height: 1.65;
	margin: 0;
	padding: 0 24px 1.1rem 0;
}
@media (max-width: 860px) {
	.pe-reset-caro__grid { grid-template-columns: 1fr; }
	.pe-reset-caro__media { max-width: 420px; margin-inline: auto; }
	.pe-reset-caro__badge { left: -4%; }
}

/* Subtítulo superpuesto sobre la foto del hero, con degradado inferior
   para garantizar legibilidad sobre la foto clara. */
.pe-reset-photo { position: relative; }
.pe-reset-photo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	/* Varias paradas que aproximan una curva de easing: el degradado de dos
	   paradas dejaba un corte visible donde terminaba (45%). */
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .28) 0%,
		rgba(0, 0, 0, .18) 18%,
		rgba(0, 0, 0, .09) 36%,
		rgba(0, 0, 0, .03) 55%,
		rgba(0, 0, 0, 0) 78%
	);
	pointer-events: none;
}
.pe-reset-photo__caption {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: clamp(20px, 5vw, 56px);
	transform: translateX(-50%);
	width: min(92%, 760px);
	margin: 0;
	text-align: center;
	font-family: var(--neue);
	font-size: clamp(1.2rem, 2.2vw, 1.7rem);
	line-height: 1.45;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.pe-reset-photo__caption p { margin: 0; }
/* En mobile el slider es más bajito (proporción de la foto): el texto y
   el CTA suben un poco, y el degradado arranca más arriba para seguir
   cubriéndolos. */
@media (max-width: 767px) {
	.pe-reset-photo__caption {
		bottom: 44px;
	}
	/* "¡nos vemos dentro!" siempre en su propia (segunda) línea. */
	.pe-reset-photo__caption-l2 {
		display: block;
	}
	.pe-reset-photo::after {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, .28) 0%,
			rgba(0, 0, 0, .18) 28%,
			rgba(0, 0, 0, .09) 48%,
			rgba(0, 0, 0, .03) 68%,
			rgba(0, 0, 0, 0) 90%
		);
	}
}
.pe-reset-photo__date {
	margin-top: .7rem !important;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-size: .8rem;
}
/* CTA del hero (en las dos slides): a la Calvagni, un link chico en caps
   subrayado en lugar de botón — el texto manda, la CTA acompaña. El color
   se repite en hover/focus por el a:hover azul de la base congelada. */
.pe-reset-hero-link {
	display: inline-block;
	font-family: var(--neue);
	font-weight: 500;
	font-size: .85rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-shadow: none;
	transition: opacity .18s ease, text-underline-offset .18s ease;
}
.pe-reset-hero-link:hover,
.pe-reset-hero-link:focus {
	color: #fff;
	opacity: .75;
	text-underline-offset: 9px;
}
.pe-reset-photo__caption .pe-reset-hero-link { margin-top: 1.6rem; }
.pe-reset-hero__cta { margin-top: 2.4rem; }

/* Video de presentación del programa (assets/images/reset.mp4). Los límites
   de alto y ancho lo adaptan tanto a orientación horizontal como vertical. */
.pe-reset-video__player {
	display: block;
	width: auto;
	max-width: min(100%, 960px);
	max-height: min(70vh, 620px);
	margin-inline: auto;
	border-radius: var(--radius);
	background: var(--brown-2);
}
/* CTA a Calendly debajo de los párrafos del video. */
.pe-reset-video__cta {
	display: inline-block;
	margin-top: 1.4rem;
}

/* Precios del programa Reset: tres tarjetas, la founders destacada en
   marrón. Namespace pe-reset-*: .pe-pricing/.pe-price-card ya existen en
   el CSS portado del 2.0 (grilla de 4 columnas) y colisionaban. */
.pe-reset-pricing__lead {
	max-width: 640px;
	margin: 1.6rem auto 0;
	font-family: var(--neue);
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--text);
}
.pe-reset-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: 1040px;
	margin-inline: auto;
}
.pe-reset-price-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(28px, 3.5vw, 44px) 24px;
	text-align: center;
}
.pe-reset-price-card__label {
	font-family: var(--neue);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	color: var(--brown-soft);
	margin: 0 0 1rem;
}
.pe-reset-price-card__amount {
	font-family: var(--serif);
	font-size: clamp(2.2rem, 3.4vw, 3rem);
	line-height: 1;
	color: var(--brown);
	margin: 0;
}
.pe-reset-price-card__note {
	font-family: var(--neue);
	font-size: .95rem;
	line-height: 1.5;
	color: var(--muted);
	margin: 1rem 0 0;
}
.pe-reset-price-card--featured {
	background: var(--brown);
	border-color: var(--brown);
}
.pe-reset-price-card--featured .pe-reset-price-card__label { color: var(--pink-btn); }
.pe-reset-price-card--featured .pe-reset-price-card__amount { color: #fff; }
.pe-reset-price-card--featured .pe-reset-price-card__note { color: rgba(255, 255, 255, .85); }
.pe-reset-pricing__hint {
	font-family: var(--serif);
	font-size: 1.15rem;
	color: var(--brown-soft);
	margin: 2.2rem 0 0;
}
/* CTA propia de cada tarjeta: empujada al fondo para que las tres queden
   alineadas aunque las notas ocupen distinto alto. */
.pe-reset-price-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.pe-reset-price-card__btn { margin-top: auto; }
.pe-reset-price-card__note { margin-bottom: 1.6rem; }
@media (max-width: 860px) {
	.pe-reset-pricing__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}

/* "Si te pasa que...": aire entre el checklist y el cierre
   "Reset es el programa que necesitas <3". */
.pe-split__body > .pe-italic { margin-top: 2.4rem; }

/* "Si te pasa que...": notebook a la izquierda + línea divisoria vertical */
.pe-split--line .pe-split__media { border-radius: 0; overflow: visible; }
.pe-split--line .pe-split__media img { border-radius: 0; }
.pe-split--line .pe-split__body {
	border-left: 1px solid var(--rose-line);
	padding-left: clamp(28px, 4vw, 56px);
	max-width: none;
}
@media (max-width: 860px) {
	.pe-split--line .pe-split__body { border-left: 0; padding-left: 0; }
}

/* Flechas del slider de testimonios: mismo estilo que los carruseles del
   sitio (círculo blanco, borde taupe, flecha fina, hover rosa — ver
   navLeft/navRight en post-979.css), en escala acorde a la sección. */
/* Todos los estados explícitos: la base congelada de Hello Elementor trae
   `button:focus/hover { background:#c36 }` (el círculo magenta) y el anillo
   de foco del navegador — acá se neutralizan para igualar la home, donde
   las flechas son <div> sin estados de botón. */
.pe-reset .pe-testi-slider__arrow,
.pe-reset .pe-testi-slider__arrow:hover,
.pe-reset .pe-testi-slider__arrow:focus,
.pe-reset .pe-testi-slider__arrow:focus-visible,
.pe-reset .pe-testi-slider__arrow:active {
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: 50%;
	background-color: #ffffff;
	background-image: url("../images/navLeft.svg");
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: 55% 50%;
	border: 1px solid #C7B5A9;
	outline: none;
	box-shadow: none;
	color: inherit;
	opacity: 1;
	transition: background-color 400ms ease, background-position 400ms ease;
}
.pe-reset .pe-testi-slider__arrow svg { display: none; }
.pe-reset .pe-testi-slider__arrow--next,
.pe-reset .pe-testi-slider__arrow--next:hover,
.pe-reset .pe-testi-slider__arrow--next:focus,
.pe-reset .pe-testi-slider__arrow--next:focus-visible,
.pe-reset .pe-testi-slider__arrow--next:active {
	background-image: url("../images/navRight.svg");
	background-position: 45% 50%;
}
/* Hover rosado como los carruseles de la home (post-979.css: #FAEAF4);
   focus y active quedan blancos. */
.pe-reset .pe-testi-slider__arrow:hover { background-color: #FAEAF4; }
.pe-reset .pe-testi-slider__arrow--prev:hover { background-position: 40% 50%; transform: translateY(-50%); }
.pe-reset .pe-testi-slider__arrow--next:hover { background-position: 60% 50%; transform: translateY(-50%); }
.pe-testi-slider { padding-inline: 84px; }
@media (max-width: 560px) {
	.pe-testi-slider { padding-inline: 0; }
	.pe-testi-slider__arrow { width: 48px; height: 48px; background-size: 18px 18px; }
	.pe-testi-slider__arrow--prev:hover { transform: translateX(0); }
	.pe-testi-slider__arrow--next:hover { transform: translateX(0); }
}

/* "Qué incluye?": carpetas de color (PNG provistos por la clienta) */
.pe-folder { width: 84px; height: auto; display: inline-block; margin-bottom: 1rem; margin-inline: auto; }
.pe-trio--folders p {
	max-width: 30ch;
	margin-inline: auto;
	font-family: var(--aileron);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink-2);
}

/* =========================================================
   Apertura del hero RESET (pe-reset.js + GSAP): cada letra
   sube desde atrás de su máscara. Los spans los crea el JS
   solo cuando hay .pe-anim y GSAP disponibles.
   ========================================================= */
.pe-reset-hero__mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Aire alrededor del glifo: en Anton la S (y otras curvas) pintan
	   apenas fuera de su caja de avance y con line-height .85 también
	   asoman por arriba; sin esto la máscara los rebana. El margen
	   negativo compensa el padding para no alterar el espaciado. La letra
	   arranca en yPercent 110, así que el padding inferior no la delata. */
	padding: 0.08em 0.05em;
	margin: -0.08em -0.05em;
}
.pe-reset-hero__letter {
	display: inline-block;
	will-change: transform;
}
/* Las letras enmascaradas son inline-block y pueden quebrar de a una
   ("RES" / "ET"): el título nunca debe partirse. */
.pe-reset-hero__title {
	white-space: nowrap;
}
/* En teléfonos el mínimo de 8rem del clamp desborda: se achica el piso
   para que RESET entre completo hasta en 320px de ancho. */
@media (max-width: 520px) {
	.pe-reset-hero__title {
		font-size: clamp(2.6rem, 20vw, 6rem);
	}
}

/* "Si te pasa que...": en mobile (columnas apiladas) el cierre
   "Reset es el programa que necesitas <3" y el botón van centrados. */
@media (max-width: 860px) {
	.pe-split__body > .pe-italic {
		text-align: center;
	}
	.pe-split__body > .pe-btn {
		display: table;
		margin-inline: auto;
	}
}

/* Contacto: campos del formulario en blanco (en la landing Reset siguen
   celestes). Borde sutil para que no se fundan con la sección clara. */
body.page-template-page-contacto .pe-reset-form .ff-el-form-control {
	background: #FFFFFF;
	border: 1px solid var(--line);
}
body.page-template-page-contacto .pe-reset-form .ff-el-form-control:focus {
	background: #FFFFFF;
	border-color: var(--muted);
}