/* ============================================================
   inner.css — Páginas internas y de servicio
   Depende de style.css
   ============================================================ */

/* ---------- Hero interno (compacto) ---------- */
.page-hero { position:relative; color:#fff; min-height:80vh; display:flex; align-items:flex-end; padding:5rem 0 2.5rem; overflow:hidden; isolation:isolate; background:var(--c-navy); }
/* Imagen de fondo (img real) + degradado encima que la deja ver */
.page-hero__media { position:absolute; inset:0; z-index:-2; }
.page-hero__media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(102deg, rgba(2,19,81,.93) 0%, rgba(2,19,81,.74) 40%, rgba(2,19,81,.40) 70%, rgba(2,19,81,.12) 100%); }
.page-hero__watermark { position:absolute; right:-6%; top:-20%; width:min(48vw,520px); opacity:.06; z-index:-1; }
/* En móvil el texto ocupa todo el ancho → degradado vertical para legibilidad, dejando ver la foto abajo */
@media (max-width:768px){
  .page-hero { padding:4.5rem 0 1.75rem; }
  .page-hero::after { background: linear-gradient(168deg, rgba(2,19,81,.92) 0%, rgba(2,19,81,.72) 52%, rgba(2,19,81,.48) 100%); }
}
.page-hero .overline { color:var(--c-turquesa); }
.page-hero h1 { font-size:var(--fs-h1); font-weight:500; margin:1rem 0 1rem; max-width:18ch; }
.page-hero h1 em { font-style:italic; color:var(--c-lila); }
.page-hero p { color:var(--color-on-dark-muted); max-width:54ch; font-size:var(--fs-lg); }
.breadcrumb { font-size:var(--fs-xs); color:var(--color-on-dark-muted); letter-spacing:.04em; }
.breadcrumb a:hover { color:var(--c-turquesa); }

/* Banner "Nuestro Equipo": foto real del equipo, sin tinte azul; solo capa oscura 30% */
body[data-page-id="equipo"] .page-hero { background:#000; align-items:flex-end; padding-bottom:2.75rem; min-height:100vh; min-height:100svh; }
body[data-page-id="equipo"] .page-hero .hero__scroll { color:var(--color-on-dark-muted); }
body[data-page-id="equipo"] .cta-band { background-image: linear-gradient(155deg, rgba(2,19,81,.9) 0%, rgba(10,91,114,.82) 60%, rgba(3,216,212,.6) 100%), url("../img/cta-equipo.jpg"); }
body[data-page-id="estetica"] .cta-band { background-image: linear-gradient(155deg, rgba(2,19,81,.9) 0%, rgba(10,91,114,.82) 60%, rgba(3,216,212,.6) 100%), url("../img/cta-estetica.jpg"); }
body[data-page-id="laser"] .cta-band { background-image: linear-gradient(155deg, rgba(2,19,81,.9) 0%, rgba(10,91,114,.82) 60%, rgba(3,216,212,.6) 100%), url("../img/cta-laser.jpg"); }
body[data-page-id="dermatologia-clinica"] .cta-band { background-image: linear-gradient(155deg, rgba(2,19,81,.9) 0%, rgba(10,91,114,.82) 60%, rgba(3,216,212,.6) 100%), url("../img/Still0415_00071.jpg"); }
@media (max-width:768px){
  body[data-page-id="equipo"] .page-hero { min-height:50vh; min-height:50svh; }
  body[data-page-id="equipo"] .page-hero .hero__scroll { display:none; }
}
body[data-page-id="equipo"] .page-hero::after { background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 20%), linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,.18) 66%, rgba(0,0,0,.06) 100%); }
body[data-page-id="equipo"] .page-hero__media img { object-position:center 38%; }
body[data-page-id="equipo"] .page-hero h1,
body[data-page-id="equipo"] .page-hero p { text-shadow:0 2px 14px rgba(0,0,0,.5); }

/* ---------- Intro de servicio ---------- */
.svc { padding:var(--space-lg) 0 var(--space-xl); }
.svc__grid { display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-lg); align-items:start; }
.svc__body h2 { font-size:var(--fs-h3); margin:var(--space-md) 0 .8rem; }
.svc__body h2:first-child { margin-top:0; }
.svc__body p { margin-bottom:1rem; color:var(--color-text-muted); }
.svc__body strong { color:var(--color-text); }
.svc__body ul.bullets { display:grid; gap:.6rem; margin:0 0 1rem; }
.svc__body ul.bullets li { position:relative; padding-left:1.4rem; }
.svc__body ul.bullets li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--c-turquesa); }

/* aside sticky */
.svc__aside { position:sticky; top:6rem; display:grid; gap:var(--space-sm); }

/* Datos rápidos */
.facts { background:var(--tint-lila); border-radius:var(--radius-lg); padding:var(--space-md); }
.facts__title { display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:1rem; }
.facts__title img { width:22px; height:22px; }
.facts ul { display:grid; gap:.8rem; }
.facts li { display:flex; gap:.7rem; align-items:flex-start; font-size:var(--fs-sm); }
.facts li img { width:20px; height:20px; flex:none; margin-top:2px; }

/* Caja CTA aside */
.svc-cta { background:var(--grad-azul-turq); color:#fff; border-radius:var(--radius-lg); padding:var(--space-md); }
.svc-cta h3 { color:#fff; font-size:var(--fs-h3); margin-bottom:.5rem; }
.svc-cta p { color:rgba(255,255,255,.85); font-size:var(--fs-sm); margin-bottom:1rem; }

/* Nota / advertencia */
.note { display:flex; gap:.8rem; padding:1rem 1.2rem; border-radius:var(--radius); border-left:4px solid var(--color-accent); background:var(--tint-naranja); font-size:var(--fs-sm); margin-top:var(--space-md); }
.note img { width:22px; height:22px; flex:none; }

/* ---------- Pasos del procedimiento ---------- */
.steps { display:grid; gap:var(--space-sm); counter-reset:step; margin-top:1rem; }
.step { display:flex; gap:1rem; align-items:flex-start; }
.step__num { counter-increment:step; flex:none; width:40px; height:40px; border-radius:50%; background:var(--c-navy); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-size:1.2rem; }
.step__num::before { content:counter(step); }
.step p { margin:0; font-size:var(--fs-sm); }
.step b { display:block; color:var(--color-text); }

/* ---------- Servicios relacionados ---------- */
.related { background:var(--color-surface); }
.related__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:var(--space-md); }
.svc-card { display:block; background:transparent; border-radius:0; padding:var(--space-md); border-right:1px solid var(--color-line); border-bottom:1px solid var(--color-line); transition:background var(--dur); }
.svc-card:nth-child(3n), .svc-card:last-child { border-right:none; }
.svc-card:hover { background:rgba(3,216,212,.05); }
.svc-card__icon { width:52px; height:52px; border-radius:14px; background:var(--tint-turquesa); display:grid; place-items:center; margin-bottom:1rem; }
.svc-card__icon img { width:28px; height:28px; }
.svc-card h3 { font-size:var(--fs-lg); margin-bottom:.4rem; }
.svc-card p { font-size:var(--fs-sm); color:var(--color-text-muted); margin:0; }
.svc-card__link { display:inline-block; margin-top:.8rem; font-size:var(--fs-sm); font-weight:600; color:var(--color-accent-text); }
.svc-card__link::after { content:" →"; }

/* ---------- Hub de tratamientos ---------- */
.cat-block { padding:var(--space-lg) 0; border-top:1px solid var(--color-line); scroll-margin-top:5rem; }
.cat-block:first-of-type { border-top:0; }
.cat-block__head { display:flex; align-items:center; gap:1rem; margin-bottom:var(--space-md); }
.cat-block__icon { width:60px; height:60px; border-radius:16px; display:grid; place-items:center; flex:none; }
.cat-block__icon img { width:32px; height:32px; }
.cat-block:nth-of-type(1) .cat-block__icon { background:var(--tint-turquesa); }
.cat-block:nth-of-type(2) .cat-block__icon { background:var(--tint-lila); }
.cat-block:nth-of-type(3) .cat-block__icon { background:var(--tint-naranja); }
.cat-block:nth-of-type(4) .cat-block__icon { background:var(--tint-turquesa); }
.cat-block h2 { font-size:var(--fs-h2); }
.cat-block__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-sm); }

/* ---------- Contacto ---------- */
.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); align-items:start; }
.contact-info { display:grid; gap:1.2rem; }
.contact-info__item { display:flex; gap:1rem; align-items:flex-start; }
.contact-info__item .ic { width:48px; height:48px; border-radius:14px; background:var(--tint-turquesa); display:grid; place-items:center; flex:none; }
.contact-info__item .ic img { width:24px; height:24px; }
.contact-info__item b { display:block; }
.contact-info__item a, .contact-info__item span { color:var(--color-text-muted); font-size:var(--fs-sm); }
.contact-info__item a:hover { color:var(--color-accent-text); }

.form { background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-lg); padding:var(--space-md); box-shadow:var(--shadow-sm); }
.form__group { margin-bottom:1.1rem; }
.form label { display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:.4rem; }
.form input, .form textarea { width:100%; font-family:var(--font-body); font-size:var(--fs-base); padding:.85rem 1rem; border:1.5px solid var(--color-line); border-radius:var(--radius); background:var(--color-bg); color:var(--color-text); transition:border-color var(--dur), box-shadow var(--dur); }
.form input:focus, .form textarea:focus { outline:none; border-color:var(--c-lila); box-shadow:0 0 0 3px rgba(157,172,255,.5); }
.form__status { margin-top:1rem; font-size:var(--fs-sm); min-height:1.2em; }
.form__status--success { color:#0A8F5C; }
.form__status--error { color:#C0392B; }

.map-embed { border:0; width:100%; height:340px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin-top:var(--space-md); }

/* hours */
.hours { display:grid; gap:.4rem; font-size:var(--fs-sm); }
.hours div { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--color-line); }

@media (max-width:980px){
  .svc__grid, .contact__grid { grid-template-columns:1fr; }
  .cat-block__grid, .related__grid { grid-template-columns:1fr; }
  .svc-card { border-right:none; }
  .svc__aside { position:static; }
}
@media (max-width:620px){
  .cat-block__head { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   Páginas de categoría (resumen de servicios, autocontenidas)
   ============================================================ */
.cat-lead { max-width:60ch; font-size:var(--fs-lg); color:var(--color-text-muted); }
.cat-intro { margin:0 0 var(--space-md); }
.cat-intro .cat-lead:last-child { margin-bottom:0; }
.subcat { margin-top:var(--space-lg); }
.subcat__title { display:flex; align-items:center; gap:.7rem; margin-bottom:var(--space-md); }
.subcat__title h2 { font-size:var(--fs-h2); }
.subcat__title--center { justify-content:center; text-align:center; }
/* ¿Qué tratamos? — lista desplegable de patologías */
.qt { margin-top:var(--space-sm); }
.qt > summary { cursor:pointer; font-weight:600; color:var(--color-accent-text); list-style:none; display:inline-flex; align-items:center; gap:.5rem; }
.qt > summary::-webkit-details-marker { display:none; }
.qt > summary::before { content:"+"; font-size:1.25em; line-height:1; }
.qt[open] > summary::before { content:"\2013"; }
.tags-grid { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--space-md); }
.tag-pill { background:var(--tint-turquesa); color:var(--color-text); font-size:var(--fs-sm); padding:.5rem 1rem; border-radius:999px; }

.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.summary-card { display:flex; flex-direction:column; gap:.8rem; background:transparent; border-radius:0; padding:var(--space-md); border-right:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.summary-card:nth-child(3n), .summary-card:last-child { border-right:none; }
.summary-card__icon { width:54px; height:54px; border-radius:14px; background:var(--tint-turquesa); display:grid; place-items:center; flex:none; }
.summary-card__icon img { width:30px; height:30px; object-fit:contain; }
.summary-card h3 { font-size:var(--fs-lg); margin-bottom:.4rem; }
.summary-card p { font-size:var(--fs-sm); color:var(--color-text-muted); margin:0; }
@media (max-width:980px){
  .summary-grid { grid-template-columns:repeat(2,1fr); }
  .summary-card:nth-child(3n) { border-right:1px solid var(--color-line); }
  .summary-card:nth-child(2n), .summary-card:last-child { border-right:none; }
}
@media (max-width:600px){
  .summary-grid { grid-template-columns:1fr; }
  .summary-card { border-right:none; }
}

/* ============================================================
   Página Nuestro Equipo
   ============================================================ */
.placeholder-note { display:flex; gap:.7rem; align-items:center; background:var(--tint-naranja); border-left:4px solid var(--color-accent); border-radius:var(--radius); padding:.9rem 1.2rem; font-size:var(--fs-sm); margin-bottom:var(--space-lg); }
.placeholder-note img { width:22px; height:22px; flex:none; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.team-card { background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur); }
.team-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.team-card__media { aspect-ratio:4/3; width:100%; }
.team-card__media img { width:100%; height:100%; object-fit:cover; }
.team-card__avatar { width:100%; height:100%; display:grid; place-items:center; background:var(--grad-azul-turq); color:#fff; font-family:var(--font-display); font-size:3.4rem; letter-spacing:.04em; }
.team-card__body { padding:var(--space-md); }
.team-card h3 { font-size:var(--fs-h3); margin-bottom:.2rem; }
.team-card .role { color:var(--color-accent-text); font-weight:600; font-size:var(--fs-sm); margin-bottom:.7rem; }
.team-card p { font-size:var(--fs-sm); color:var(--color-text-muted); margin:0; }
.team-card.is-lead { grid-column:span 3; display:grid; grid-template-columns:280px 1fr; }
.team-card.is-lead .team-card__media { aspect-ratio:auto; }
.team-card.is-lead .team-card__body { padding:var(--space-lg); align-self:center; }
@media (max-width:900px){ .team-grid { grid-template-columns:repeat(2,1fr); } .team-card.is-lead { grid-column:span 2; } }
@media (max-width:620px){ .team-grid { grid-template-columns:1fr; } .team-card.is-lead { grid-column:span 1; grid-template-columns:1fr; } }