/*
Theme Name: Orden Psicológico
Theme URI: https://ordenpsicologico.com/
Author: Orden Psicológico
Description: Tema de bloques a medida para Orden Psicológico. Requiere el complemento Orden Psicológico Core para los contenidos estructurados y el formulario.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: orden-psicologico
*/

:root {
  --op-midnight: #071B33;
  --op-navy: #0B2D5C;
  --op-cobalt: #1B4F8A;
  --op-graphite: #151619;
  --op-stone: #B8B3A7;
  --op-surface: #F4F5F6;
  --op-border: #D9DEE4;
}

.wp-site-blocks { overflow: clip; }
.op-skip-link { position: absolute; left: -9999px; top: auto; }
.op-skip-link:focus { background: #fff; color: var(--op-midnight); left: 1rem; padding: .75rem 1rem; top: 1rem; z-index: 1000; }
.op-header { border-bottom: 1px solid var(--op-border); position: sticky; top: 0; z-index: 100; }
.op-header .custom-logo { height: 34px; max-width: 220px; object-fit: contain; object-position: left center; width: auto; }
.op-nav .wp-block-navigation-item__content { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.op-hero { min-height: min(720px, calc(100vh - 80px)); }
.op-eyebrow { color: var(--op-cobalt); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.op-rule { background: var(--op-cobalt); height: 2px; width: 64px; }
.op-card { border: 1px solid var(--op-border); height: 100%; }
.op-card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.op-pricing-card { border: 1px solid var(--op-border); display: grid; gap: 1rem; height: 100%; padding: 1.5rem; }
.op-pricing-card--featured { border-color: var(--op-cobalt); border-width: 2px; }
.op-faq details { border-top: 1px solid var(--op-border); padding: 1.25rem 0; }
.op-faq details:last-child { border-bottom: 1px solid var(--op-border); }
.op-faq summary { color: var(--op-midnight); cursor: pointer; font-weight: 700; padding-right: 2rem; }
.op-faq summary::marker { color: var(--op-cobalt); }
.op-form { display: grid; gap: 1rem; }
.op-form__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-form label { color: var(--op-midnight); display: grid; font-size: .9rem; font-weight: 650; gap: .45rem; }
.op-form input, .op-form select, .op-form textarea { background: #fff; border: 1px solid #9AA5B1; border-radius: 4px; color: var(--op-graphite); font: inherit; min-height: 48px; padding: .75rem; width: 100%; }
.op-form textarea { min-height: 128px; resize: vertical; }
.op-form input:focus, .op-form select:focus, .op-form textarea:focus { border-color: var(--op-cobalt); box-shadow: 0 0 0 3px rgba(27,79,138,.22); outline: 0; }
.op-form__consent { align-items: start; display: flex !important; font-size: .85rem !important; font-weight: 400 !important; }
.op-form__consent input { accent-color: var(--op-cobalt); flex: 0 0 auto; min-height: 1.25rem; margin: .15rem .65rem 0 0; width: 1.25rem; }
.op-form__honeypot { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.op-form__notice { border-left: 3px solid var(--op-cobalt); color: var(--op-midnight); margin: 0 0 1rem; padding: .85rem 1rem; }
.op-footer a { text-underline-offset: 4px; }
.op-footer-logo img { filter: brightness(0) invert(1); }

@media (max-width: 781px) {
  .op-header { position: relative; }
  .op-header .wp-block-site-logo { max-width: 175px; }
  .op-hero { min-height: auto; }
  .op-form__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Landing editorial: derived from the approved Orden Psicológico composition. */
.op-landing { color: var(--op-midnight); overflow: hidden; }
.op-shell { margin: 0 auto; max-width: 1240px; padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }
.op-site-header { background: #fff; border-bottom: 1px solid #e6e9ed; position: sticky; top: 0; z-index: 50; }
.op-header-inner { align-items: center; display: flex; gap: 2rem; justify-content: space-between; min-height: 94px; }
.op-brand { display: block; flex: 0 0 auto; line-height: 0; width: min(225px, 30vw); }
.op-brand img { display: block; height: auto; width: 100%; }
.op-site-nav { align-items: center; display: flex; gap: clamp(1rem, 2.6vw, 2.5rem); justify-content: center; }
.op-site-nav a { color: var(--op-midnight); font-size: .9rem; font-weight: 700; text-decoration: none; }
.op-site-nav a:hover, .op-site-nav a:focus-visible { color: var(--op-cobalt); }
.op-header-cta { border: 1px solid var(--op-cobalt); color: var(--op-cobalt); font-size: .87rem; font-weight: 750; padding: .7rem 1rem; text-decoration: none; white-space: nowrap; }
.op-header-cta:hover, .op-header-cta:focus-visible { background: var(--op-cobalt); color: #fff; }
.op-landing h1, .op-landing h2, .op-landing h3, .op-landing p { margin-top: 0; }
.op-kicker { color: var(--op-cobalt); font-size: .76rem; font-weight: 800; letter-spacing: .14em; margin-bottom: 1.5rem; text-transform: uppercase; }
.op-landing__hero { background: #fff; padding-top: clamp(1.5rem, 3vw, 3rem); }
.op-hero-grid { align-items: stretch; display: grid; grid-template-columns: minmax(0, .95fr) minmax(460px, 1fr); min-height: 676px; }
.op-hero-copy { align-self: center; padding: clamp(3rem, 7vw, 6.5rem) clamp(2rem, 7vw, 7rem) clamp(3rem, 7vw, 6rem) clamp(.25rem, 1vw, 1rem); }
.op-hero-copy h1 { color: var(--op-midnight); font-size: clamp(3.25rem, 5.45vw, 5.8rem); font-weight: 780; letter-spacing: -.075em; line-height: .96; margin-bottom: 1.8rem; max-width: 700px; }
.op-hero-copy h1 em { color: var(--op-cobalt); font-style: normal; font-weight: 400; }
.op-hero-lede { color: #33475f; font-size: clamp(1.02rem, 1.45vw, 1.22rem); line-height: 1.7; margin-bottom: 2.15rem; max-width: 570px; }
.op-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.op-button { background: var(--op-cobalt); color: #fff; display: inline-block; font-size: .94rem; font-weight: 750; padding: .95rem 1.25rem; text-decoration: none; }
.op-button:hover, .op-button:focus-visible { background: var(--op-midnight); color: #fff; }
.op-text-link { color: var(--op-midnight); font-size: .93rem; font-weight: 750; text-decoration: none; text-underline-offset: .35rem; }
.op-text-link:hover, .op-text-link:focus-visible { color: var(--op-cobalt); text-decoration: underline; }
.op-clinical-note { border-left: 2px solid var(--op-cobalt); color: #3c4e61; font-size: .78rem; line-height: 1.75; margin-top: 3.3rem; max-width: 535px; padding-left: 1rem; }
.op-clinical-note strong { color: var(--op-midnight); }
.op-hero-art { background: var(--op-midnight); min-height: 620px; overflow: hidden; position: relative; }
.op-hero-emblem { height: 430px; opacity: .08; position: absolute; right: -20px; top: 10px; width: 430px; }
.op-portrait { background: #f2eee7; margin: 0; overflow: hidden; position: absolute; z-index: 2; }
.op-portrait img { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.op-portrait figcaption { background: rgba(7, 27, 51, .95); bottom: 0; color: #fff; font-size: .7rem; font-weight: 700; left: 0; letter-spacing: .01em; padding: .7rem .8rem; position: absolute; right: 0; }
.op-portrait--ingrid { height: 73%; left: 10%; top: 11%; width: 49%; }
.op-portrait--erika { bottom: 5%; height: 56%; right: 6%; width: 43%; }
.op-hero-motto { bottom: 5%; color: #fff; font-size: clamp(1rem, 1.4vw, 1.22rem); font-weight: 700; left: 7%; line-height: 1.2; position: absolute; z-index: 3; }
.op-hero-motto em { color: #8ab8ec; font-style: normal; font-weight: 400; }
.op-hero-bar { border-top: 1px solid #e6e9ed; color: #657487; font-size: .76rem; letter-spacing: .1em; margin: 0; padding: 1.15rem 1rem; text-align: center; text-transform: uppercase; }
.op-section { padding: clamp(5rem, 9vw, 9rem) 0; }
.op-section-heading { max-width: 790px; }
.op-section-heading h2, .op-evidence-grid h2, .op-contact-grid h2, .op-faq-layout h2 { color: var(--op-midnight); font-size: clamp(2.45rem, 4vw, 4.35rem); font-weight: 760; letter-spacing: -.065em; line-height: 1.02; margin-bottom: 1.55rem; }
.op-section-heading > p:last-child, .op-evidence-grid p, .op-contact-grid > div > p, .op-faq-layout > div > p { color: #526276; font-size: 1.06rem; line-height: 1.75; max-width: 670px; }
.op-steps { border-top: 1px solid var(--op-border); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3rem, 5vw, 5rem); }
.op-steps article { border-right: 1px solid var(--op-border); padding: 1.5rem 1.5rem 0 0; }
.op-steps article + article { padding-left: 1.5rem; }
.op-steps article:last-child { border-right: 0; }
.op-steps span { color: var(--op-cobalt); display: block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; margin-bottom: 2.5rem; }
.op-steps h3 { color: var(--op-midnight); font-size: 1.35rem; letter-spacing: -.035em; margin-bottom: .8rem; }
.op-steps p { color: #5d6b7b; font-size: .94rem; line-height: 1.65; }
.op-section--concerns { background: #f3f6f9; }
.op-concern-list { border-top: 1px solid #ccd7e2; display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: clamp(2.75rem, 4vw, 4.5rem) 0 0; padding: 0; }
.op-concern-list li { border-bottom: 1px solid #ccd7e2; color: var(--op-midnight); font-size: 1.05rem; font-weight: 650; padding: 1.05rem 1.8rem 1.05rem 1.65rem; position: relative; }
.op-concern-list li::before { color: var(--op-cobalt); content: '—'; left: 0; position: absolute; }
.op-section--team { background: #fff; }
.op-section-heading--split { align-items: end; display: grid; gap: 2.5rem; grid-template-columns: 1.4fr .7fr; max-width: none; }
.op-section-heading--split > p { margin-bottom: 1.5rem; }
.op-section--team .op-dynamic-grid { gap: clamp(1.5rem, 4vw, 4.5rem); margin-top: clamp(2.75rem, 4vw, 4.5rem); }
.op-section--team .op-dynamic-card { background: transparent; border: 0; display: grid; gap: 1.5rem; grid-template-columns: minmax(210px, .85fr) 1fr; }
.op-section--team .op-dynamic-card > a { background: #f0eee9; display: block; height: 100%; min-height: 395px; overflow: hidden; }
.op-section--team .op-dynamic-card__image { height: 100%; object-fit: cover; }
.op-section--team .op-dynamic-card__body { align-content: start; padding: 1rem 0; }
.op-section--team .op-dynamic-card__eyebrow { color: var(--op-cobalt); }
.op-section--team .op-dynamic-card h3 { font-size: 1.85rem; letter-spacing: -.055em; }
.op-section--team .op-dynamic-card p { color: #4f6072; line-height: 1.6; }
.op-section--investment { background: var(--op-midnight); color: #fff; }
.op-section--investment h2, .op-section--investment h3 { color: #fff; }
.op-section--investment .op-section-heading > p:last-child { color: #c6d5e5; }
.op-section--investment .op-kicker, .op-section--contact .op-kicker { color: #8ab8ec; }
.op-section--investment .op-dynamic-grid { gap: 1rem; margin-top: clamp(2.5rem, 4vw, 4rem); }
.op-section--investment .op-price { background: #fff; border: 0; color: var(--op-midnight); padding: clamp(1.6rem, 3vw, 2.5rem); }
.op-section--investment .op-price h3 { color: var(--op-midnight); font-size: 1.35rem; }
.op-section--investment .op-price__amount { color: var(--op-cobalt); font-size: clamp(2.1rem, 3.4vw, 3.2rem); }
.op-section--investment .op-price p { color: #56677a; }
.op-couple-card { border: 1px solid rgba(255,255,255,.28); margin-top: 1rem; max-width: 650px; padding: clamp(1.6rem, 3vw, 2.5rem); }
.op-couple-card h3 { font-size: clamp(1.45rem, 2vw, 2rem); letter-spacing: -.04em; }
.op-couple-card p:not(.op-kicker) { color: #c6d5e5; }
.op-couple-card .op-text-link { color: #fff; }
.op-section--evidence { background: #fff; }
.op-evidence-grid { display: grid; gap: clamp(2rem, 9vw, 10rem); grid-template-columns: 1fr .85fr; }
.op-evidence-grid > div:last-child { padding-top: 4rem; }
.op-section--contact { background: #e9f0f7; }
.op-contact-grid { display: grid; gap: clamp(2.5rem, 7vw, 8rem); grid-template-columns: .8fr 1fr; }
.op-contact-points { color: var(--op-cobalt); font-size: .9rem; font-weight: 750; list-style: none; margin: 2rem 0 0; padding: 0; }
.op-contact-points li { border-top: 1px solid #b9c9d8; padding: .85rem 0; }
.op-form-panel { background: #fff; box-shadow: 0 14px 44px rgba(7,27,51,.12); padding: clamp(1.3rem, 3vw, 2.4rem); }
.op-form-panel .op-form { gap: .9rem; }
.op-form-panel .wp-block-button { margin: .4rem 0 0; }
.op-form-panel .wp-block-button__link { background: var(--op-cobalt); }
.op-section--faq { background: #fff; }
.op-faq-layout { display: grid; gap: clamp(2.5rem, 8vw, 9rem); grid-template-columns: .8fr 1fr; }
.op-faq { margin-top: .5rem; }
.op-faq details { border-color: #cbd6df; }
.op-faq summary { color: var(--op-midnight); font-size: 1rem; }
.op-faq__answer { color: #536478; line-height: 1.7; padding-top: .75rem; }
.op-site-footer { background: var(--op-midnight); color: #d9e4ee; padding: 4.5rem 0 1.3rem; }
.op-footer-inner { display: flex; gap: 3rem; justify-content: space-between; }
.op-footer-brand { display: block; margin-bottom: 1.5rem; width: min(250px, 70vw); }
.op-footer-brand img { display: block; height: auto; width: 100%; }
.op-site-footer p { font-size: .93rem; line-height: 1.55; margin-bottom: .35rem; }
.op-site-footer nav { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(115px, 1fr)); }
.op-site-footer a { color: #fff; font-size: .88rem; text-decoration: none; }
.op-site-footer a:hover, .op-site-footer a:focus-visible { color: #8ab8ec; }
.op-footer-bottom { border-top: 1px solid rgba(255,255,255,.22); display: flex; font-size: .72rem; gap: 1rem; justify-content: space-between; line-height: 1.55; margin-top: 3.2rem; padding-top: 1.2rem; }

@media (max-width: 900px) {
  .op-header-inner { min-height: 76px; }
  .op-header-cta { display: none; }
  .op-hero-grid { grid-template-columns: 1fr 1fr; min-height: 0; }
  .op-hero-copy { padding-left: 0; padding-right: 2.5rem; }
  .op-hero-art { min-height: 520px; }
  .op-section--team .op-dynamic-card { grid-template-columns: 1fr; }
  .op-section--team .op-dynamic-card > a { min-height: 0; }
  .op-section--team .op-dynamic-card__image { aspect-ratio: 4 / 4.6; }
}
@media (max-width: 700px) {
  .op-site-nav { display: none; }
  .op-header-inner { min-height: 68px; }
  .op-brand { width: 195px; }
  .op-landing__hero { padding-top: 0; }
  .op-hero-grid, .op-section-heading--split, .op-evidence-grid, .op-contact-grid, .op-faq-layout { grid-template-columns: 1fr; }
  .op-hero-copy { padding: 3.8rem 0 3.3rem; }
  .op-hero-copy h1 { font-size: clamp(3.25rem, 14vw, 4.45rem); }
  .op-hero-art { min-height: 495px; margin-left: -1.25rem; margin-right: -1.25rem; }
  .op-portrait--ingrid { height: 70%; left: 8%; width: 51%; }
  .op-portrait--erika { height: 54%; right: 5%; width: 44%; }
  .op-hero-bar { font-size: .62rem; line-height: 1.6; }
  .op-section { padding: 4.5rem 0; }
  .op-steps, .op-concern-list { grid-template-columns: 1fr; }
  .op-steps article, .op-steps article + article { border-bottom: 1px solid var(--op-border); border-right: 0; padding: 1.3rem 0; }
  .op-steps span { margin-bottom: 1rem; }
  .op-section-heading--split > p, .op-evidence-grid > div:last-child { margin-bottom: 0; padding-top: 0; }
  .op-section--team .op-dynamic-grid { grid-template-columns: 1fr; }
  .op-section--team .op-dynamic-card { grid-template-columns: minmax(130px, .7fr) 1fr; }
  .op-section--team .op-dynamic-card__image { aspect-ratio: 4 / 5; }
  .op-footer-inner, .op-footer-bottom { flex-direction: column; }
  .op-footer-bottom { gap: .5rem; }
}