/* PesoClaro — Home rediseñado (prefijo ph-) */
.ph { color: var(--ink); font-family: var(--font-body); line-height: 1.55; overflow-x: clip; }
.ph * { box-sizing: border-box; }
.ph img { max-width: 100%; display: block; }
.ph-i { width: 1.15em; height: 1.15em; flex: none; }
.ph-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }

.ph-preview { background: #FFF4D6; color: #6B4E00; text-align: center; font-size: .82rem; padding: 8px 16px; border-bottom: 1px solid #F0D98A; }

/* Tipografía y botones */
.ph-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.ph-h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); }
.ph-sub { color: #52645B; font-size: 1.02rem; margin: 0 0 8px; max-width: 62ch; }
.ph-sub--right { max-width: 46ch; }
.ph-lead { font-size: 1.06rem; color: #3E5248; max-width: 54ch; margin: 18px 0 26px; }
.ph-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: .98rem; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; border: 2px solid transparent; cursor: pointer; }
.ph-btn:hover { transform: translateY(-1px); }
.ph-btn--solid { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(47,122,85,.28); }
.ph-btn--solid:hover { background: var(--primary-dark); color: #fff; }
.ph-btn--ghost, .ph-btn--line { background: #fff; color: var(--primary); border-color: #BFD8C8; }
.ph-btn--ghost:hover, .ph-btn--line:hover { border-color: var(--primary); color: var(--primary-dark); }
.ph-btn--white { background: #fff; color: var(--blue-900); }
.ph-btn--white:hover { color: var(--primary-dark); }
.ph-note { display: flex; gap: 10px; align-items: center; background: #E5F1E8; border: 1px solid #CFE3D5; color: #2C5A42; border-radius: 12px; padding: 12px 16px; font-size: .9rem; margin: 22px 0 0; }
.ph-note--inline { margin: 0; max-width: 44ch; }
.ph-fine { font-size: .82rem; color: #6A7C73; margin: 20px 0 0; }
.ph-fine a { color: var(--primary); text-decoration: underline; }

.ph-sec { padding: 64px 0; }
.ph-sec--mint { background: var(--mint); }
.ph-head-row { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }

/* PLANES */
.ph-plans { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.ph-plan { position: relative; background: #fff; border: 1px solid #DDEBE1; border-radius: 22px; padding: 26px 22px; display: flex; flex-direction: column; }
.ph-plan--pop { border: 2px solid var(--primary); box-shadow: 0 18px 44px rgba(47,122,85,.18); }
.ph-plan__badge { position: absolute; top: -13px; right: 20px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; letter-spacing: .03em; }
.ph-plan h3 { font-size: 1.25rem; margin: 0; }
.ph-plan__tag { color: #52645B; font-size: .88rem; margin: 6px 0 14px; min-height: 2.6em; }
.ph-plan__price { margin-bottom: 14px; }
.ph-plan__price small { display: block; color: #6A7C73; font-size: .78rem; font-weight: 600; }
.ph-plan__price strong { font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.ph-plan__price span { display: block; font-size: .82rem; color: #6A7C73; }
.ph-plan ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; flex: 1; }
.ph-plan li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; }
.ph-plan li .ph-i { color: var(--primary); margin-top: 3px; width: 1em; height: 1em; }
.ph-plan .ph-btn { width: 100%; }

/* EQUIPO */
.ph-team { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-member { background: #fff; border: 1px solid #DDEBE1; border-radius: 20px; overflow: hidden; }
.ph-member img { width: 100%; aspect-ratio: 3 / 3.4; object-fit: cover; object-position: center 18%; }
.ph-member__ph { aspect-ratio: 3 / 3.4; display: grid; place-content: center; justify-items: center; gap: 8px; background: linear-gradient(160deg, #DDEBE1, #EEF6F0); color: var(--primary); font-size: .85rem; font-weight: 700; }
.ph-member__ph .ph-i { width: 56px; height: 56px; opacity: .6; }
.ph-member h3 { font-size: 1rem; margin: 12px 14px 2px; }
.ph-member p { font-size: .8rem; color: #52645B; margin: 0 14px 16px; line-height: 1.35; }

/* EXPERIENCIAS */
.ph-reviews { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
.ph-review { margin: 0; background: #fff; border: 1px solid #DDEBE1; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.ph-review blockquote { margin: 0; font-size: .95rem; color: #2E4238; }
.ph-review figcaption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph-review img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.ph-review figcaption span { display: grid; line-height: 1.2; }
.ph-review small { color: #6A7C73; font-size: .78rem; }
.ph-review i { margin-left: auto; font-style: normal; color: #F5A623; letter-spacing: 2px; font-size: .9rem; }

/* FAQ */
.ph-faq { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
.ph-faq details { background: #fff; border: 1px solid #DDEBE1; border-radius: 14px; padding: 0 18px; align-self: start; }
.ph-faq summary { cursor: pointer; font-weight: 700; font-size: .95rem; padding: 16px 24px 16px 0; list-style: none; position: relative; }
.ph-faq summary::-webkit-details-marker { display: none; }
.ph-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--primary); font-weight: 400; }
.ph-faq details[open] summary::after { content: "–"; }
.ph-faq p { margin: 0 0 16px; color: #52645B; font-size: .9rem; }


/* ───── HERO (imagen difuminada hacia el texto) ───── */
.ph-hero { position: relative; padding-top: var(--header-h); background: linear-gradient(180deg, #F2F8F3 0%, var(--cream) 100%); overflow: hidden; }
.ph-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: 0; }
.ph-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%); }
.ph-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--cream) 0%, transparent 18%); pointer-events: none; }
.ph-hero__stage { z-index: 1; min-height: 600px; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 124px; }
.ph-hero__copy { max-width: 500px; position: relative; z-index: 3; }
.ph-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.07; font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--blue-900); }
.ph-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ph-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 18px; margin: 0; font-size: .86rem; color: #2E4238;
  position: absolute; left: max(20px, calc(50% - 560px)); bottom: 56px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); border-radius: 16px; max-width: calc(100% - 40px); }
.ph-chips li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ph-chips .ph-i { color: var(--primary); width: 1.4em; height: 1.4em; }

.ph-float { position: absolute; z-index: 2; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(20,60,40,.18); padding: 14px 16px; font-size: .8rem; line-height: 1.25; }
.ph-float small { display: block; color: #4A5E54; font-weight: 700; font-size: .78rem; margin-bottom: 4px; }
.ph-float--progress { left: 47%; top: 24%; width: 200px; }
.ph-float--progress strong { display: block; font-size: 1.6rem; color: #1B2B24; line-height: 1.15; }
.ph-float--progress span { color: #6A7C73; font-size: .78rem; }
.ph-float--progress svg { display: block; width: 100%; height: 34px; margin: 4px 0 6px; }
.ph-float--progress em { display: flex; align-items: center; gap: 6px; font-style: normal; font-weight: 700; color: var(--primary); background: var(--mint); border-radius: 10px; padding: 6px 9px; font-size: .78rem; }
.ph-float--progress em .ph-i { width: 1.1em; height: 1.1em; }
.ph-float--cita { left: 56%; bottom: 26%; width: 268px; }
.ph-float--cita > div { display: flex; gap: 10px; align-items: center; }
.ph-float--cita img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 12%; flex: none; }
.ph-float--cita span { color: #52645B; font-size: .76rem; }
.ph-float--cita b { display: block; color: #1B2B24; font-size: .84rem; }
.ph-float--cita i { font-style: normal; color: var(--primary); font-weight: 700; }
.ph-float--team { right: 3%; top: 19%; width: 214px; }
.ph-float--team ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; }
.ph-float--team li { display: flex; align-items: center; gap: 10px; color: #6A7C73; font-size: .74rem; }
.ph-float--team img, .ph-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 14%; flex: none; }
.ph-av { display: grid; place-items: center; background: var(--mint); color: var(--primary); }
.ph-av .ph-i { width: 20px; height: 20px; }
.ph-float--team b { color: #1B2B24; font-size: .82rem; }

/* ───── CIFRAS ───── */
.ph-stats { padding: 0 0 8px; margin-top: -30px; position: relative; z-index: 3; }
.ph-stats__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ph-stat { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid #E4EEE7; border-radius: 20px; padding: 18px 20px; box-shadow: 0 10px 26px rgba(20,60,40,.07); }
.ph-stat__ic { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(145deg, #DDEFE3, #F1F8F3); color: var(--primary); display: grid; place-items: center; flex: none; }
.ph-stat__ic .ph-i { width: 32px; height: 32px; stroke-width: 1.6; }
.ph-stat strong { overflow-wrap: anywhere; display: block; font-size: 1.35rem; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
.ph-stat small { display: block; font-size: .8rem; color: #52645B; line-height: 1.35; margin-top: 3px; }

/* ───── CÓMO FUNCIONA (línea de pasos) ───── */
.ph-how { background: linear-gradient(180deg, var(--cream) 0%, #F0F7F2 100%); }
.ph-how__head { text-align: center; margin-bottom: 40px; }
.ph-how__head .ph-sub { margin: 0 auto; }
.ph-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; position: relative; }
.ph-flow li { position: relative; text-align: center; padding: 0 6px; }
.ph-flow__orb { position: relative; width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--blue-600), var(--blue-800)); box-shadow: 0 14px 28px rgba(31,81,57,.28), 0 0 0 8px rgba(47,122,85,.10); }
.ph-flow__orb .ph-i { width: 44px; height: 44px; stroke-width: 1.5; }
.ph-flow__orb b { position: absolute; top: -4px; right: -4px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .85rem; display: grid; place-items: center; border: 3px solid #fff; }
.ph-flow h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--ink); }
.ph-flow p { font-size: .88rem; color: #52645B; margin: 0 auto 12px; max-width: 24ch; }
.ph-flow__tag { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--primary); background: #fff; border: 1px solid #CFE3D5; border-radius: 999px; padding: 5px 11px; }
.ph-flow__tag .ph-i { width: 1.1em; height: 1.1em; }

/* ───── TODO TU EQUIPO (compacto) ───── */
.ph-coord { padding: 28px 0 40px; background: linear-gradient(180deg, #F0F7F2, var(--cream)); }
.ph-coord__grid { display: grid; gap: 18px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.ph-coord .ph-h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.ph-coord .ph-sub { font-size: .92rem; margin-bottom: 14px; }
.ph-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-feats li { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 14px; padding: 12px 12px 14px; border: 1px solid #E1EDE5; box-shadow: 0 4px 12px rgba(20,60,40,.05); }
.ph-feats li > span { width: 42px; height: 42px; border-radius: 50%; background: var(--mint); color: var(--primary); display: grid; place-items: center; }
.ph-feats li > span .ph-i { width: 24px; height: 24px; stroke-width: 1.6; }
.ph-feats b { display: block; font-size: .86rem; line-height: 1.2; }
.ph-feats small { color: #52645B; font-size: .74rem; line-height: 1.3; display: block; margin-top: 3px; }
.ph-coord__img { margin: 0; position: relative; }
.ph-coord__img img { width: 100%; height: auto; border-radius: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%); mask-image: linear-gradient(to right, transparent 0%, #000 22%); }
.ph-coord__img figcaption { font-size: .7rem; color: #6A7C73; margin-top: 4px; text-align: center; }

/* ───── BANNER ───── */
.ph-banner-sec { padding: 8px 0 64px; }
.ph-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-radius: 22px; padding: 26px 30px; min-height: 190px;
  background-color: #EAF3EC; background-size: cover; background-position: right 12%; background-repeat: no-repeat; border: 1px solid #DDEBE1; box-shadow: 0 12px 30px rgba(20,60,40,.08); }
.ph-banner__txt { max-width: 560px; }
.ph-banner .ph-eyebrow { margin-bottom: 4px; font-size: .66rem; }
.ph-banner h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.15; font-weight: 800; margin: 0 0 4px; color: var(--ink); letter-spacing: -.02em; }
.ph-banner p { margin: 0; font-size: .9rem; color: #3E5248; }
.ph-banner .ph-btn { margin-right: min(22vw, 300px); }

/* ───── Responsive ───── */
@media (min-width: 720px) {
  .ph-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .ph-flow li:not(:last-child)::after { content: ""; position: absolute; top: 48px; left: calc(50% + 58px); width: calc(100% - 116px); border-top: 3px dotted #9CC6AB; }
  .ph-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ph-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}
@media (min-width: 1100px) {
  .ph-coord__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 26px; }
  .ph-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .ph-hero__media { width: 100%; height: calc(330px + var(--header-h)); bottom: auto; }
  .ph-hero__media img { object-position: 70% 30%; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
  .ph-hero__media::after { display: none; }
  .ph-hero__stage { min-height: 0; padding-top: 300px; padding-bottom: 28px; }
  .ph-chips { position: static; margin-top: 22px; background: rgba(255,255,255,.7); max-width: none; }
  .ph-float--progress { left: 16px; top: 22px; width: 150px; padding: 10px 12px; }
  .ph-float--progress svg, .ph-float--progress em { display: none; }
  .ph-float--cita { display: none; }
  .ph-float--team { right: 14px; top: 20px; width: 168px; padding: 10px 12px; }
  .ph-float--team ul { gap: 5px; }
  .ph-float--team li:nth-child(n+3) { display: none; }
  .ph-stats { margin-top: 0; padding-top: 6px; }
  .ph-banner { background-position: 82% 12%; padding: 22px 20px; }
  .ph-banner__txt { background: linear-gradient(90deg, rgba(247,251,248,.92), rgba(247,251,248,.6)); border-radius: 14px; padding: 6px 8px; }
  .ph-banner .ph-btn { margin-right: 0; }
}
@media (max-width: 480px) {
  .ph-wrap { padding-left: 16px; padding-right: 16px; }
  .ph-sec { padding-top: 48px; padding-bottom: 48px; }
  .ph-btn { padding: 13px 22px; }
  .ph-flow { gap: 30px; }
  .ph-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ph-btn { transition: none; } }

.ph-eg-tag { position: absolute; top: 10px; right: 12px; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A5A00; background: #FFF1CF; border-radius: 999px; padding: 2px 8px; }
.ph-eg-note { position: absolute; right: 3%; bottom: 62px; max-width: 330px; margin: 0; font-size: .7rem; color: #5B6E64; text-align: right; background: rgba(255,255,255,.72); border-radius: 10px; padding: 5px 9px; z-index: 3; }
.ph-av--lg { width: 48px; height: 48px; }
.ph-av--lg .ph-i { width: 26px; height: 26px; }
@media (max-width: 1099px) {
  .ph-eg-note { position: static; max-width: none; text-align: left; margin-top: 12px; background: none; padding: 0; }
  .ph-float--progress .ph-eg-tag, .ph-float--cita .ph-eg-tag { display: none; }
}
@media (max-width: 1099px) {
  .ph-float--progress { top: calc(var(--header-h) + 14px); }
  .ph-float--team { top: calc(var(--header-h) + 12px); }
}

/* ───── Hero en celular y tablet: foto bajo la cabecera, burbujas al borde inferior (sin tapar el rostro) ───── */
@media (max-width: 1099px) {
  .ph-hero__media { top: var(--header-h); bottom: auto; width: 100%; height: 300px; }
  .ph-hero__media img { object-position: 74% 20%; }
  .ph-hero__stage { padding-top: 366px; padding-bottom: 28px; }
  .ph-float--progress { left: 14px; top: calc(var(--header-h) + 238px); width: calc(50% - 20px); padding: 10px 12px; }
  .ph-float--team { right: 14px; top: calc(var(--header-h) + 238px); width: calc(50% - 20px); padding: 10px 12px; }
  .ph-float--progress strong { font-size: 1.35rem; }
  .ph-float small { font-size: .72rem; }
  .ph-float--team li { font-size: .7rem; gap: 8px; }
  .ph-float--team img, .ph-av { width: 30px; height: 30px; }
  .ph-float--team b { font-size: .78rem; }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .ph-hero__media { height: 380px; }
  .ph-hero__media img { object-position: 80% 20%; }
  .ph-hero__stage { padding-top: 452px; }
  .ph-float--progress, .ph-float--team { top: calc(var(--header-h) + 318px); width: 240px; }
  .ph-float--progress { left: 5%; }
  .ph-float--team { right: 5%; }
}