/* ============================================================
   Landing /psicologa-salamanca — estilos PROPIOS
   ------------------------------------------------------------
   Se carga DESPUÉS de landing.css (que no se modifica) y solo en
   psicologa-salamanca.html. Reutiliza la identidad corporativa
   (tokens, tipografías, botones, formulario, FAQ, pie, cookies) y
   añade una composición propia para Salamanca con el prefijo .sl-
   para no alterar nada de /psicologa-valladolid ni de la home.
   ============================================================ */

.sl-anchor { scroll-margin-top: calc(var(--lp-header-h) + 16px); }

/* ============================================================
   1. HERO — foto real en la consulta de Salamanca
   ============================================================ */
.sl-hero {
position: relative;
overflow: hidden;
background: var(--lp-cream);
padding: 48px 0 88px;
}
.sl-hero-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
column-gap: clamp(40px, 6vw, 96px);
grid-template-areas:
". media"
"eyebrow media"
"title media"
"sub media"
"human media"
"cta media"
"proof media"
". media";
grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
}
.sl-hero .lp-sub { max-width: 30em; }

.sl-hero-media { grid-area: media; position: relative; align-self: center; padding: 10px 30px 34px 36px; }
.sl-hero-frame { position: relative; z-index: 0; max-width: 470px; margin-left: auto; }
/* bloque de color desplazado detrás de la foto */
.sl-hero-frame::before {
content: '';
position: absolute;
inset: 30px -26px -26px 30px;
z-index: -1;
border-radius: 30px;
background: var(--lp-sand);
}
.sl-hero-photo {
margin: 0;
aspect-ratio: 4 / 5;
border-radius: 30px;
overflow: hidden;
background: var(--lp-sand);
box-shadow: 0 50px 90px -44px rgba(36, 24, 18, .5);
}
.sl-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sl-hero .lp-tag { top: 26px; right: -16px; }

.sl-addr {
position: absolute;
left: -30px;
bottom: 44px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
border-radius: 16px;
background: var(--lp-white);
box-shadow: 0 24px 44px -22px rgba(36, 24, 18, .5);
font-size: .78rem;
line-height: 1.3;
color: var(--lp-ink-soft);
}
.sl-addr .lp-pin { width: 18px; height: 18px; color: var(--lp-acento); }
.sl-addr strong { display: block; font-size: .92rem; color: var(--lp-ink); font-weight: 700; }

/* ============================================================
   2. MOTIVOS — tarjetas
   ============================================================ */
.sl-needs { background: var(--lp-white); padding: 108px 0 100px; }
.sl-needs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: end; }
.sl-needs-head .lp-lead { margin-top: 0; }
.sl-needs-head .lp-link-cta { margin-top: 20px; }
.sl-topics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 52px;
}
.sl-topics li {
display: flex;
flex-direction: column;
gap: 6px;
padding: 26px 24px 24px;
border: 1px solid var(--lp-line);
border-radius: 22px;
background: var(--lp-cream);
}
.sl-topics li:last-child { grid-column: span 2; background: var(--lp-beige); border-color: transparent; }
.sl-topics .lp-topic-n { font-size: 1.05rem; }
.sl-topics .lp-topic-name { font-size: 1.32rem; }
.sl-topics .lp-topic-note { margin: 0; text-align: left; font-size: .86rem; line-height: 1.5; }

/* ============================================================
   3. SOBRE CRISTINA — formación con foto de los títulos
   ============================================================ */
.sl-about { background: var(--lp-beige); padding: 116px 0; }
.sl-about-grid {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: clamp(40px, 7vw, 110px);
align-items: start;
}
.sl-about-photo {
position: sticky;
top: calc(var(--lp-header-h) + 32px);
margin: 0;
}
.sl-about-photo .sl-img {
aspect-ratio: 4 / 5;
border-radius: 26px 26px 6px 26px;
overflow: hidden;
background: var(--lp-sand);
box-shadow: 0 40px 80px -46px rgba(36, 24, 18, .55);
}
.sl-img img { width: 100%; height: 100%; object-fit: cover; }
.sl-caption {
display: block;
margin-top: 14px;
font-family: var(--lp-italic);
font-style: italic;
font-weight: 600;
font-size: 1.05rem;
color: var(--lp-ink-soft);
}
.sl-about .lp-creds { margin-top: 40px; }

/* ============================================================
   4. SERVICIOS — individual, pareja (destacada) y sexología
   ============================================================ */
.sl-service { background: var(--lp-cream); padding: 112px 0; }
.sl-service--sex { background: var(--lp-beige); }
.sl-service-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 7vw, 110px);
align-items: start;
}
.sl-service .lp-btn { margin-top: 34px; }
.sl-card {
padding: 40px 40px 36px;
background: var(--lp-white);
border-radius: 28px 28px 28px 6px;
border: 1px solid var(--lp-line);
}
.sl-card-title { margin: 0 0 18px; font-family: var(--lp-serif); font-weight: 500; font-size: 1.4rem; line-height: 1.25; color: var(--lp-ink); }
.sl-list li {
position: relative;
padding: 13px 0 13px 34px;
border-top: 1px solid var(--lp-line);
font-size: .98rem;
line-height: 1.5;
color: var(--lp-ink);
}
.sl-list li:first-child { border-top: 0; padding-top: 4px; }
.sl-list li::before {
content: '';
position: absolute;
left: 0; top: 14px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--lp-rosa-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8735F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.sl-list li:first-child::before { top: 5px; }

/* pareja: bloque oscuro, el de más peso de la página */
.sl-couple { background: var(--lp-ink); color: var(--lp-cream); padding: 120px 0 112px; }
.sl-couple .lp-kicker { color: var(--lp-rosa); }
.sl-couple .lp-h2 { color: var(--lp-cream); }
.sl-couple .lp-h2 em { color: var(--lp-rosa); }
.sl-couple .lp-lead { color: rgba(251, 248, 242, .82); max-width: 40em; }
.sl-couple-head { max-width: 760px; }
.sl-couple-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
margin-top: 56px;
align-items: stretch;
}
.sl-couple-card {
padding: 34px 32px 30px;
border-radius: 24px;
background: rgba(251, 248, 242, .06);
border: 1px solid rgba(251, 248, 242, .14);
}
.sl-couple-card h3 { margin: 0 0 16px; font-family: var(--lp-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--lp-cream); }
.sl-couple-card p { margin: 0; font-size: .96rem; line-height: 1.65; color: rgba(251, 248, 242, .82); }
.sl-couple-card p + p { margin-top: 12px; }
.sl-couple .sl-list li { color: var(--lp-cream); border-top-color: rgba(251, 248, 242, .14); font-size: .95rem; }
.sl-couple .sl-list li::before { background-color: rgba(217, 169, 156, .22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9A99C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.sl-couple-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 44px; }
.sl-couple .lp-btn--primary { background: var(--lp-cream); color: var(--lp-ink); box-shadow: none; }
.sl-couple .lp-btn--primary:hover { background: var(--lp-rosa); }
.sl-couple-cta p { margin: 0; font-size: .92rem; color: rgba(251, 248, 242, .78); }
.sl-couple .lp-text-link { color: var(--lp-cream); border-bottom-color: var(--lp-rosa); }

.sl-note {
margin-top: 28px;
padding: 18px 22px;
border-left: 2px solid var(--lp-acento);
border-radius: 0 14px 14px 0;
background: var(--lp-rosa-tint);
font-size: .95rem;
line-height: 1.6;
color: var(--lp-ink);
}

/* ============================================================
   5. LA CONSULTA EN GRAN VÍA 56
   ============================================================ */
.sl-place { background: var(--lp-white); padding: 116px 0 110px; }
.sl-place-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
.sl-place-photo { margin: 0; position: relative; }
.sl-place-photo .sl-img { aspect-ratio: 4 / 3; border-radius: 26px 26px 26px 6px; overflow: hidden; background: var(--lp-sand); }
.sl-chip {
position: absolute;
left: 14px; bottom: 14px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(251, 248, 242, .94);
font-family: var(--lp-italic);
font-style: italic;
font-weight: 600;
font-size: .95rem;
line-height: 1.2;
color: var(--lp-ink);
}
.sl-place .lp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-place .lp-map { height: 200px; }
.sl-gallery-wide { position: relative; margin: 56px 0 0; }
.sl-gallery-wide .sl-img { aspect-ratio: 21 / 9; border-radius: 26px; overflow: hidden; background: var(--lp-sand); }
.sl-gallery-wide img { object-position: 50% 58%; }
.sl-cross { margin: 26px 0 0; font-size: .92rem; line-height: 1.6; color: var(--lp-ink-soft); }

/* ============================================================
   6. TERAPIA ONLINE
   ============================================================ */
.sl-online { background: var(--lp-cream); padding: 104px 0; }
.sl-online-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 7vw, 110px);
align-items: center;
}
.sl-steps { counter-reset: sl; border-top: 1px solid var(--lp-line); }
.sl-steps li {
counter-increment: sl;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
padding: 20px 0;
border-bottom: 1px solid var(--lp-line);
}
.sl-steps li::before {
content: counter(sl, decimal-leading-zero);
font-family: var(--lp-italic);
font-style: italic;
font-size: 1.15rem;
color: var(--lp-acento);
}
.sl-steps strong { display: block; font-family: var(--lp-serif); font-weight: 500; font-size: 1.2rem; line-height: 1.3; color: var(--lp-ink); }
.sl-steps span { display: block; margin-top: 4px; font-size: .92rem; line-height: 1.55; color: var(--lp-ink-soft); }
.sl-online .lp-btn { margin-top: 30px; }

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
.sl-hero-media { padding-left: 32px; padding-right: 22px; }
.sl-addr { left: -14px; }
.sl-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-couple-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sl-couple-card:first-child { grid-row: span 2; }
.sl-card { padding: 34px 30px 30px; }
}

@media (max-width: 880px) {
.sl-hero { padding: 18px 0 44px; }
.sl-hero-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-template-areas: "eyebrow" "title" "sub" "media" "cta" "proof" "human";
}
.sl-hero .lp-eyebrow { font-size: .6rem; letter-spacing: .12em; gap: 10px; }
.sl-hero .lp-eyebrow::before { width: 18px; }
.sl-hero .lp-title { margin-top: 12px; font-size: 2.02rem; line-height: 1.08; }
.sl-hero .lp-sub { margin-top: 12px; font-size: .97rem; line-height: 1.55; }
.sl-hero-media { padding: 0; margin-top: 18px; }
.sl-hero-frame { max-width: none; }
.sl-hero-frame::before { display: none; }
.sl-hero-photo { aspect-ratio: auto; height: clamp(210px, 58vw, 300px); border-radius: 22px; }
.sl-hero-photo img { object-position: 50% 60%; }
.sl-hero .lp-tag { top: 10px; right: 10px; padding: 6px 12px; font-size: .66rem; }
.sl-addr { left: 10px; bottom: 10px; padding: 8px 12px 8px 10px; border-radius: 12px; font-size: .68rem; gap: 7px; }
.sl-addr strong { font-size: .8rem; }
.sl-addr .lp-pin { width: 14px; height: 14px; }
.sl-hero .lp-actions { flex-direction: column; margin-top: 18px; gap: 10px; }
.sl-hero .lp-human { margin-top: 24px; font-size: 1.2rem; }

.sl-needs { padding: 64px 0 60px; }
.sl-needs-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sl-topics { gap: 10px; margin-top: 30px; }
.sl-topics li { padding: 18px 16px 16px; border-radius: 18px; gap: 4px; }
.sl-topics .lp-topic-name { font-size: 1.1rem; }
.sl-topics .lp-topic-note { display: block; font-size: .78rem; }

.sl-about { padding: 64px 0; }
.sl-about-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sl-about-photo { position: static; order: 2; }
.sl-about-photo .sl-img { aspect-ratio: 1 / 1; }
.sl-about-photo .sl-img img { object-position: 50% 30%; }
.sl-about .lp-creds { margin-top: 28px; }

.sl-service, .sl-place, .sl-online { padding: 64px 0; }
.sl-service-grid, .sl-place-grid, .sl-online-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.sl-service .lp-btn, .sl-online .lp-btn { margin-top: 24px; }
.sl-card { padding: 26px 22px 22px; }
.sl-card-title { font-size: 1.22rem; }

.sl-couple { padding: 64px 0; }
.sl-couple-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 32px; }
.sl-couple-card:first-child { grid-row: auto; }
.sl-couple-card { padding: 26px 22px 22px; }
.sl-couple-card h3 { font-size: 1.18rem; }
.sl-couple-cta { margin-top: 28px; }

.sl-place-photo { order: -1; }
.sl-place .lp-facts { grid-template-columns: minmax(0, 1fr); }
.sl-place .lp-map { height: auto; min-height: 190px; }
.sl-gallery-wide { margin-top: 30px; }
.sl-gallery-wide .sl-img { aspect-ratio: 4 / 3; border-radius: 20px; }
.sl-chip { left: 10px; bottom: 10px; font-size: .82rem; padding: 5px 10px; }
.sl-steps li { grid-template-columns: 36px minmax(0, 1fr); padding: 16px 0; }
.sl-steps strong { font-size: 1.08rem; }
}

@media (max-width: 374px) {
.sl-hero .lp-title { font-size: 1.85rem; }
.sl-topics { grid-template-columns: minmax(0, 1fr); }
.sl-topics li:last-child { grid-column: auto; }
}
.sl-steps p { margin: 0; }

/* opiniones: tres tarjetas iguales (las reseñas son breves) */
.sl-reviews .lp-reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
.sl-reviews .lp-review--main { grid-row: auto; padding: 56px 34px 32px; }
.sl-reviews .lp-review--main::before { top: 10px; left: 30px; font-size: 5.5rem; }
.sl-reviews .lp-review--main blockquote { margin-top: 24px; font-size: 1.45rem; }
@media (max-width: 880px) {
.sl-hero .lp-tag { left: auto; right: 10px; }
.sl-reviews .lp-reviews-grid { grid-template-columns: minmax(0, 1fr); }
.sl-reviews .lp-review--main { padding: 44px 24px 28px; }
.sl-reviews .lp-review--main::before { left: 22px; }
.sl-reviews .lp-review--main blockquote { font-size: 1.35rem; }
}

/* precios confirmados (Salamanca): 70 € individual · 90 € pareja */
.sl-price { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; }
.sl-price-n { flex-shrink: 0; white-space: nowrap; font-family: var(--lp-serif); font-weight: 500; font-size: 3rem; line-height: 1; letter-spacing: -.03em; color: var(--lp-ink); }
.sl-price-u { display: flex; flex-direction: column; font-size: .88rem; line-height: 1.35; color: var(--lp-ink-soft); padding-left: 14px; border-left: 1px solid var(--lp-line); }
.sl-price-u small { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-acento); margin-top: 3px; }
.sl-service .sl-price + .lp-btn { margin-top: 26px; }
.sl-couple .sl-price { margin: 0 12px 0 0; }
.sl-couple .sl-price-n { color: var(--lp-cream); }
.sl-couple .sl-price-u { color: rgba(251, 248, 242, .78); border-left-color: rgba(251, 248, 242, .2); }
.sl-couple .sl-price-u small { color: var(--lp-rosa); }
@media (max-width: 880px) {
.sl-price { margin-top: 22px; }
.sl-price-n { font-size: 2.5rem; }
.sl-couple-cta { flex-direction: column; align-items: flex-start; }
.sl-couple .sl-price { margin: 0 0 4px; }
}