/* ============================================================
   PÁGINAS DE SERVICIO — consulting, mentoring, training, etc.
   Estilos compartidos por todas las páginas que usan template-*.php de servicio.
   Se encola condicionalmente desde functions.php en cada plantilla de servicio.
   ============================================================ */

/* ---- Layout base ---- */
.page-service .c-container{max-width:1280px;margin:0 auto;}
.page-service .c-section{padding:88px 48px;}
.page-service .c-section--white{background:#FFFFFF;}
.page-service .c-section--tint{background:#E8F2F4;}

.page-service .c-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:88px;}
.page-service .c-grid-2--start{align-items:start;}
.page-service .c-grid-2--center{align-items:center;}

/* ---- Tipografía compartida ---- */
.page-service .c-h2{font-family:'Montserrat',sans-serif;font-weight:700;font-size:30px;color:var(--color-negro);line-height:1.2;margin:0;}
.page-service .c-h2--lg{font-size:34px;}
.page-service .c-h2--center{text-align:center;}
.page-service .c-lead{font-family:'Montserrat',sans-serif;font-weight:400;font-size:15px;color:#353A3B;line-height:1.72;margin:0;text-wrap:pretty;}
.page-service .c-lead p{margin:0;}

/* ---- Contenido enriquecido (WYSIWYG de ACF) ---- */
.page-service .c-rte p{font-family:'Montserrat',sans-serif;font-weight:400;font-size:15px;color:#353A3B;line-height:1.72;margin:0 0 16px;text-wrap:pretty;}
.page-service .c-rte p:last-child{margin-bottom:0;}
.page-service .c-rte strong{color:var(--color-negro);font-weight:700;}
.page-service .c-rte a{color:var(--color-turquesa-500);}

/* ---- Listas con icono (Font Awesome vía ::before) ---- */
/* Lista "Where Product Strategy Breaks Down" (X roja).
   Se aplica sobre CUALQUIER <ul> dentro de .c-rte--list, porque el editor
   WYSIWYG de WordPress genera el <ul> sin clases propias. */
.page-service .c-rte--list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.page-service .c-rte--list ul li{position:relative;padding-left:28px;font-family:'Montserrat',sans-serif;font-size:15px;color:#353A3B;line-height:1.65;}
/* font: var(--fa-font-regular) en vez de la familia escrita a mano: Font
   Awesome la renombra en cada versión mayor ("Font Awesome 6 Free" →
   "Font Awesome 7 Free") y hardcodearla rompía este icono al actualizar.
   El font-size va después del shorthand porque este lo resetearía. */
.page-service .c-rte--list ul li::before{content:"\f057";font:var(--fa-font-regular);position:absolute;left:0;top:1px;font-size:16px;color:#E74C3C;}
.page-service .c-rte--list ul strong{color:var(--color-negro);font-weight:700;}


/* ============================================================
   HERO
   ============================================================ */
.page-service .c-hero{background:linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);padding:80px 48px 88px;position:relative;overflow:hidden;}
.page-service .c-hero .bg-hero{background-image:url('../../img/ui/bg-hero.png');background-position:top left;background-repeat:repeat;background-size:5%;-webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);mask-image:linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.2) 100%);width:100%;height:100%;position:absolute;top:0;left:0;}
.page-service .c-hero .hero-parallax-bg{position:absolute;top:-40%;left:0;width:100%;height:180%;background:linear-gradient(45deg, var(--color-turquesa-500) 0%, var(--color-menta-500) 100%);will-change:transform;z-index:0;}
.page-service .c-hero__inner{max-width:1280px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.page-service .c-hero__title{font-family:'Comfortaa',sans-serif;font-weight:300;font-size:3.6rem;color:var(--color-blanco);margin:0 0 8px;line-height:4.5rem;text-transform:uppercase;}
.page-service .c-hero__subtitle{font-family:'Montserrat',sans-serif;font-weight:400;font-size:18px;color:rgba(255,255,255,0.8);max-width:580px;margin:0 auto;line-height:1.65;text-wrap:pretty;}
.page-service .c-hero__subtitle p{margin:0;}

/* ============================================================
   HERO — ANIMACIÓN DE ENTRADA (load-triggered, CSS puro)
   ============================================================
   Corre una sola vez al cargar la página; no depende del
   IntersectionObserver (.fade-up en main.js). Sistemas distintos
   a propósito: uno es scroll-triggered (JS), este es load-triggered.
   fill-mode: both → el elemento arranca en opacity:0 antes de que
   empiece la animación; evita el flash del contenido final.
   ============================================================ */
@keyframes pfHeroFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-service .c-hero__title {
  animation: pfHeroFadeIn 0.7s ease-out both;
}
.page-service .c-hero__subtitle {
  animation: pfHeroFadeIn 0.7s ease-out 0.15s both;
}

/* ============================================================
   S1 — INTRO 2-COL
   ============================================================ */
.page-service .c-intro__left{display:flex;flex-direction:column;gap:28px;}
.page-service .c-intro__right{display:flex;flex-direction:column;gap:24px;}
.page-service .c-intro__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px;}


/* ============================================================
   S2 — CONCRETE RESULTS (badges)
   ============================================================ */
.page-service .c-results__inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:52px;align-items:center;}
.page-service .c-results__head{text-align:center;max-width:680px;}
.page-service .c-results__head .c-h2{margin-bottom:18px;}

.page-service .c-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;width:100%;}
.page-service .c-badge{background:#FFFFFF;border-radius:14px;padding:32px 20px 28px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 1px 3px rgba(2,9,10,0.06),0 2px 6px rgba(2,9,10,0.03);text-align:center;transition:transform 0.25s,box-shadow 0.25s;}
.page-service .c-badge:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(22,129,150,0.15);}
.page-service .c-badge__icon{width:56px;height:56px;border-radius:50%;background:#E8F2F4;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.page-service .c-badge__icon svg{width:22px;height:22px;color:var(--color-turquesa-500);}
.page-service .c-badge__label{font-family:'Montserrat',sans-serif;font-weight:400;font-size:14px;color:var(--color-negro);line-height:1.45;}

/* ============================================================
   S3 — REAL-WORLD COMPLEXITY (foto = imagen destacada)
   ============================================================ */
.page-service .c-photo{aspect-ratio:3/2;background:linear-gradient(135deg,#E8F2F4 0%,#DCF1EC 100%);border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:300px;}
.page-service .c-photo--empty{border:1.5px dashed #A2CDD5;}
.page-service .c-photo__img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block;}
.page-service .c-photo__placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0.5;}
.page-service .c-photo__placeholder svg{width:44px;height:44px;color:#459AAB;}
.page-service .c-photo__placeholder span{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:#459AAB;letter-spacing:0.08em;text-transform:uppercase;}
.page-service .c-complex__text{display:flex;flex-direction:column;gap:24px;}

/* ============================================================
   S4 — HOW I WORK (steps)
   ============================================================ */
.page-service .c-process__inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:52px;align-items:center;}
.page-service .c-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%;}
.page-service--training .c-steps{grid-template-columns:repeat(5,1fr);}
.page-service--mentoring .c-steps{grid-template-columns:repeat(3,1fr);}
.page-service .c-step{background:#FFFFFF;border-radius:14px;padding:28px 24px 32px;display:flex;flex-direction:column;gap:16px;box-shadow:0 1px 3px rgba(2,9,10,0.06),0 2px 6px rgba(2,9,10,0.03);transition:transform 0.25s,box-shadow 0.25s;}
.page-service .c-step:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(22,129,150,0.15);}
.page-service .c-step__icon{width:38px;height:38px;border-radius:50%;background:#E8F2F4;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.page-service .c-step__icon svg{width:16px;height:16px;color:var(--color-turquesa-500);}
.page-service .c-step__title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:var(--color-negro);margin:0;line-height:1.3;}
.page-service .c-step__desc{font-family:'Montserrat',sans-serif;font-weight:400;font-size:14px;color:#4E5354;line-height:1.68;margin:0;}
.page-service .c-step__desc p{margin:0;}

/* ============================================================
   S4 — DESAFIOS (mentoring — tarjetas horizontales)
   Componente .c-desafio-row: patrón de tarjeta igual a
   .c-rte--checklist ul li — fondo blanco, borde gris, radio 12px.
   Icono circular a la izquierda, título+desc apilados a la derecha.
   ============================================================ */
.page-service .c-desafios{display:flex;flex-direction:column;gap:14px;}
.page-service .c-desafio-row{display:flex;align-items:flex-start;gap:24px;padding:22px 24px;background:var(--color-blanco);border-radius:12px;border:1px solid var(--color-gris-50);transition:transform 0.25s,box-shadow 0.25s;}
.page-service .c-desafio-row:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(22,129,150,0.15);}
.page-service .c-desafio-row__icon{width:40px;height:40px;border-radius:50%;background:var(--color-turquesa-50);color:var(--color-turquesa-500);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.page-service .c-desafio-row__icon svg{width:18px;height:18px;color:var(--color-turquesa-500);}
.page-service .c-desafio-row__content{flex:1;}
.page-service .c-desafio-row__content p{font-family:'Montserrat',sans-serif;font-weight:400;font-size:15px;color:var(--color-gris-600);line-height:1.72;margin:0;text-wrap:pretty;}
.page-service .c-desafio-row__content strong{color:var(--color-negro);font-weight:700;}

/* ============================================================
   S5 — MEASURABLE OUTCOMES
   ============================================================ */
.page-service .c-outcomes__inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:44px;align-items:center;}
.page-service .c-outcomes__inner .c-rte{width:100%;}

/* ============================================================
   S6 — CTA (dark)
   ============================================================ */
.page-service .c-cta__inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:64px;align-items:start;}
.page-service .c-cta__title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:32px;color:var(--color-negro);margin:0;line-height:1.25;text-wrap:pretty;}
.page-service .c-cta__body,
.page-service .c-cta__closing{font-family:'Montserrat',sans-serif;font-weight:400;font-size:15px;color:#353A3B;line-height:1.72;text-wrap:pretty;}
.page-service .c-cta__body p,
.page-service .c-cta__closing p{margin:0 0 12px;}
.page-service .c-cta__body p:last-child,
.page-service .c-cta__closing p:last-child{margin-bottom:0;}
.page-service .c-cta__body strong{color:var(--color-negro);}
.page-service .c-cta__closing strong{color:var(--color-negro);}
.page-service .c-cta a{color:var(--color-turquesa-500);text-decoration:underline;}

/* ============================================================
   S5 — PRECIOS (mentoring — tarjetas)
   ============================================================ */
.page-service .c-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;}
.page-service .c-pricing-card{background:var(--color-turquesa-50);border-radius:14px;padding:36px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 6px rgba(2,9,10,0.10),0 6px 16px rgba(2,9,10,0.06);transition:transform 0.25s,box-shadow 0.25s;}
.page-service .c-pricing-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(2,9,10,0.18);}
.page-service .c-pricing-card__name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:var(--color-negro);margin:0;line-height:1.3;}
.page-service .c-pricing-card__price{font-family:'Montserrat',sans-serif;font-weight:700;font-size:28px;color:var(--color-turquesa-500);margin:0;line-height:1.2;}
.page-service .c-pricing-card__detail{font-family:'Montserrat',sans-serif;font-weight:400;font-size:14px;color:var(--color-gris-600);margin:0;line-height:1.65;}
.page-service .c-pricing-note{font-family:'Montserrat',sans-serif;font-weight:400;font-size:13px;color:var(--color-gris-500);margin:20px 0 0;line-height:1.5;}
.page-service .c-pricing-closing{margin-top:16px;}
.page-service .c-section--pricing .c-h2{margin-bottom:16px;}
.page-service .c-section--pricing .c-lead{margin-bottom:32px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991px){
	.page-service .c-grid-2,
	.page-service .c-cta__inner{grid-template-columns:1fr;gap:48px;}
	.page-service .c-badges{grid-template-columns:repeat(2,1fr);}
	.page-service .c-steps{grid-template-columns:repeat(2,1fr);}
	.page-service .c-section,
	.page-service .c-hero{padding-left:24px;padding-right:24px;}
	.page-service .c-hero__title{font-size:2.5rem;}
	/* BL-33: en mobile el patrón se veía casi imperceptible al 5% (mismo
	   valor que desktop) — pedido explícito, sube a 25%. */
	.page-service .c-hero .bg-hero{background-size:25%;}
}
@media (max-width:560px){
	.page-service .c-badges,
	.page-service .c-steps{grid-template-columns:1fr;}
	.page-service .c-desafio-row{flex-direction:column;gap:16px;}
	.page-service .c-pricing-grid{grid-template-columns:1fr;}
}