/*
Theme Name: Estudios Comal
Description: Tema editorial de bloques para historias y proyectos audiovisuales.
Version: 0.6.1
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: estudios-comal
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
:root { --ec-ink:#1a1a1a; --ec-ochre:#c98024; --ec-paper:#f7f5f1; --ec-sand:#e7e2d9; --ec-muted:#595650; --ec-line:#ccc6ba; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ec-paper); color:var(--ec-ink); font-family:Manrope,system-ui,sans-serif; font-size:16px; line-height:1.65; }
body .wp-site-blocks { padding:0; }
body .wp-site-blocks > * { margin-block-start:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-underline-offset:5px; }
button,input,select,textarea { font:inherit; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid currentColor; outline-offset:5px; }
h1,h2,h3,p,figure,dl { margin:0; }
h1,h2,h3 { font-weight:650; line-height:1.12; letter-spacing:-.045em; text-wrap:balance; }
h1 { font-size:clamp(2.5rem,6vw,5.6rem); max-width:1100px; }
h2 { font-size:clamp(2rem,3.6vw,3.5rem); }
h3 { font-size:1.35rem; letter-spacing:-.025em; line-height:1.3; }
/* Semantic card headings retain the approved h3 typography. */
.project-card h2,.service-card h2 { font-size:1.35rem; letter-spacing:-.025em; line-height:1.3; }
p + p { margin-top:1rem; }
.shell { width:min(1280px,calc(100% - 40px)); margin-inline:auto; }
.section-pad { padding-block:72px; }
.eyebrow { font-size:.72rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; line-height:1.6; }
.lead { font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.65; max-width:740px; }
.small { font-size:.8rem; }
.muted,.supporting-note { color:var(--ec-muted); }
.button-row { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.button { display:inline-flex; gap:24px; justify-content:space-between; align-items:center; padding:15px 22px; min-height:50px; background:var(--ec-ink); color:var(--ec-paper); border:1px solid var(--ec-ink); text-decoration:none; font-size:.85rem; font-weight:650; cursor:pointer; }
.button:hover { background:#34312b; }
.button span { font-size:1.2rem; }
.button-light { color:var(--ec-ink); background:var(--ec-paper); border-color:var(--ec-paper); }
.button-light:hover { background:var(--ec-sand); }
.text-link { font-size:.88rem; font-weight:700; text-decoration:underline; }
.text-link span[aria-hidden] { padding-left:8px; }
.skip-link { position:absolute; top:-100px; left:16px; padding:12px 18px; background:var(--ec-ink); color:white; z-index:100; }
.skip-link:focus { top:12px; }
.site-header { position:relative; background:#fff; border-bottom:1px solid var(--ec-line); }
.header-inner { display:flex; min-height:96px; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:block; flex:none; }
.brand-image { display:block; position:relative; width:112px; height:76px; overflow:hidden; }
.brand-image img { position:absolute; width:256px; max-width:none; left:-72px; top:-72px; }
.desktop-nav { display:none; }
.desktop-nav ul,.mobile-menu ul,.site-footer nav ul { margin:0; padding:0; list-style:none; }
.desktop-nav ul { display:flex; align-items:center; gap:26px; }
.desktop-nav a { font-size:.78rem; text-decoration:none; font-weight:650; display:block; padding:12px 0; }
.desktop-nav a:hover,.desktop-nav [aria-current] { text-decoration:underline; text-decoration-color:var(--ec-ochre); text-decoration-thickness:2px; }
.desktop-nav li:last-child a { border:1px solid var(--ec-line); padding:11px 18px; }
.mobile-menu summary { cursor:pointer; padding:12px 0 12px 18px; font-weight:650; list-style:none; display:flex; align-items:center; gap:18px; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu nav { position:absolute; top:100%; left:0; width:100%; background:#fff; padding:18px 20px 28px; border-bottom:1px solid var(--ec-line); z-index:20; }
.mobile-menu a { display:block; padding:10px 0; text-decoration:none; }
.mobile-menu [aria-current] { font-weight:800; text-decoration:underline; }
.hero { padding-block:48px 56px; display:grid; gap:40px; }
.hero .eyebrow { margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.signal { width:7px; height:7px; border-radius:50%; background:var(--ec-ochre); display:inline-block; }
.hero h1 { font-size:clamp(2.6rem,6.7vw,6.1rem); line-height:1.04; letter-spacing:-.055em; }
.hero h1 span { display:inline-block; padding-bottom:12px; border-bottom:3px solid var(--ec-ochre); }
.hero-intro { margin-top:28px; max-width:470px; font-size:1rem; line-height:1.75; }
.hero .button-row { margin-top:30px; }
.hero-visual { align-self:stretch; position:relative; background:var(--ec-sand); }
.hero-visual > img,.hero-visual > .image-placeholder { width:100%; height:350px; object-fit:cover; }
.hero-visual figcaption { display:flex; justify-content:space-between; gap:12px; padding:15px 18px; font-size:.66rem; font-weight:700; border-top:1px solid var(--ec-ink); }
.image-placeholder { background:var(--ec-ink); color:var(--ec-sand); display:flex; min-height:220px; align-items:center; justify-content:center; flex-direction:column; padding:28px; text-align:center; font-size:1.4rem; }
.image-placeholder span { font-size:2.4rem; line-height:1.2; letter-spacing:-.035em; }
.image-placeholder small { margin-top:24px; font-size:.7rem; }
.origin-section { background:var(--ec-sand); }
.split-heading { display:grid; gap:24px; }
.split-heading .lead { margin-top:26px; }
.split-heading .text-link { display:inline-block; margin-top:24px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:36px; }
.section-heading .eyebrow { margin-bottom:16px; }
.service-grid { display:grid; grid-template-columns:1fr; border-top:1px solid var(--ec-ink); }
.service-card { border-bottom:1px solid var(--ec-line); padding:28px 0; display:flex; flex-direction:column; align-items:flex-start; }
.service-number { color:var(--ec-muted); font-size:.76rem; font-weight:600; margin-bottom:24px; }
.service-card :is(h2,h3) { margin-bottom:16px; }
.service-card p { font-size:.85rem; color:var(--ec-muted); margin-bottom:26px; }
.service-card a { font-size:.8rem; font-weight:700; margin-top:auto; }
.supporting-note { margin-top:28px; max-width:720px; font-size:.9rem; }
.projects-section { padding-top:24px; }
.project-grid { display:grid; gap:42px 32px; }
.project-image { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--ec-sand); }
.project-image img,.project-image .image-placeholder { width:100%; height:100%; object-fit:cover; }
.project-meta { display:flex; justify-content:space-between; gap:16px; font-size:.7rem; color:var(--ec-muted); margin-top:18px; }
.project-card :is(h2,h3) { font-size:clamp(1.3rem,2vw,1.7rem); margin-top:10px; }
.project-card :is(h2,h3) a { display:flex; justify-content:space-between; gap:16px; text-decoration:none; }
.project-card :is(h2,h3) a:hover { text-decoration:underline; }
.project-services { font-size:.7rem; color:var(--ec-muted); margin-top:12px; }
.logo-section { padding-block:28px 70px; }
.logo-cloud { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--ec-line); gap:12px; }
.organization-mark { min-height:115px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:18px; text-align:center; gap:10px; font-weight:650; font-size:.8rem; }
.organization-mark img { width:auto; height:auto; max-height:65px; max-width:160px; object-fit:contain; }
.cta-section { background:var(--ec-ink); color:var(--ec-paper); padding-block:65px; }
.cta-inner { display:grid; gap:35px; }
.cta-inner .eyebrow { color:var(--ec-sand); margin-bottom:18px; }
.cta-inner h2 { font-size:clamp(2.5rem,5vw,4.8rem); }
.cta-inner .button { margin-top:24px; }
.site-footer { background:var(--ec-sand); }
.footer-grid { padding-block:50px; display:grid; gap:30px; }
.footer-brand { font-size:1.9rem; font-weight:750; letter-spacing:-.05em; text-decoration:none; }
.footer-brand span { color:#9b5910; }
.site-footer .small { margin-top:16px; }
.site-footer nav a { text-decoration:none; display:inline-block; padding-block:5px; font-size:.85rem; }
.site-footer nav a:hover { text-decoration:underline; }
.site-footer .eyebrow { margin-bottom:14px; }
.footer-bottom { border-top:1px solid var(--ec-line); padding-block:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.68rem; }
.breadcrumbs { padding-top:28px; font-size:.7rem; color:var(--ec-muted); }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; }
.breadcrumbs li+li::before { content:'/'; margin-right:8px; }
.page-intro { padding-block:48px 65px; }
.page-intro .eyebrow { margin-bottom:24px; }
.page-intro .lead { margin-top:26px; }
.page-intro .button { margin-top:28px; }
.services-section:has(.page-intro) { padding-top:0; }
.projects-section .page-intro { padding-bottom:56px; }
.organization-hero h1 { max-width:1000px; }
.principles-grid,.method-grid { display:grid; gap:30px; }
.principles-grid article { padding-top:22px; border-top:1px solid var(--ec-line); }
.principles-grid p,.method-grid p { font-size:.92rem; margin-top:15px; color:var(--ec-muted); }
.method-grid { list-style:none; counter-reset:method; padding:0; margin:0; }
.method-grid li { counter-increment:method; padding-top:24px; border-top:1px solid var(--ec-ink); }
.method-grid li::before { content:'0' counter(method); display:block; font-size:.8rem; margin-bottom:22px; color:var(--ec-muted); }
.team-section { padding-bottom:80px; }
.team-section h2 { margin-top:16px; max-width:700px; }
.placeholder-note { background:var(--ec-sand); border-left:3px solid var(--ec-ochre); padding:20px; font-size:.85rem; margin-top:24px; }
.empty-state { border:1px solid var(--ec-line); padding:36px; }
.empty-state p { margin-block:16px; }
.pagination { margin-top:48px; display:flex; flex-wrap:wrap; gap:10px; }
.pagination a,.pagination span { padding:10px 16px; border:1px solid var(--ec-line); text-decoration:none; }
.pagination .current { background:var(--ec-ink); color:white; }
.case-header { padding-block:42px; }
.case-header .eyebrow { margin-bottom:22px; }
.case-header .lead { margin-top:28px; }
.case-facts { display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid var(--ec-line); padding-top:25px; margin-top:36px; }
.case-facts dt { font-size:.68rem; color:var(--ec-muted); margin-bottom:6px; }
.case-facts dd { margin:0; font-size:.9rem; font-weight:650; }
.case-cover img { width:100%; max-height:720px; object-fit:cover; }
.case-body { padding-block:50px; display:grid; gap:32px; }
.plain-list { list-style:none; margin:14px 0 0; padding:0; font-size:.85rem; }
.plain-list li { padding-block:7px; }
.narrative section+section { margin-top:42px; }
.narrative h2 { font-size:1.9rem; margin-bottom:20px; }
.narrative p { line-height:1.85; }
.gallery-section { padding-bottom:55px; }
.gallery-section h2 { margin-bottom:26px; font-size:2rem; }
.gallery { display:grid; gap:25px; }
.gallery img { width:100%; height:auto; object-fit:contain; }
.gallery figcaption { margin-top:10px; color:var(--ec-muted); font-size:.75rem; }
.case-media { display:grid; gap:28px; padding-bottom:45px; }
.media-embed h2 { font-size:1.8rem; margin-bottom:22px; }
.media-stage { padding:28px; border:1px solid var(--ec-line); background:var(--ec-sand); }
.media-stage .button { margin-top:20px; }
.media-stage .text-link { font-size:.75rem; }
.media-stage iframe { display:block; border:0; width:100%; aspect-ratio:16/9; margin-top:20px; }
.credits { padding-bottom:60px; font-size:.85rem; }
.credits h2 { font-size:1.1rem; margin-bottom:14px; }
.contact-layout { display:grid; gap:40px; padding-bottom:80px; }
.contact-layout h2 { font-size:2rem; margin-bottom:24px; }
.contact-email { display:inline-block; margin-top:20px; overflow-wrap:anywhere; }
.contact-preview .placeholder-note { margin-top:0; margin-bottom:28px; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
legend { font-size:1.2rem; font-weight:650; padding:0 0 24px; }
.contact-preview label { display:block; font-size:.8rem; margin-bottom:20px; }
.contact-preview label span { font-size:.7rem; color:var(--ec-muted); }
.contact-preview input,.contact-preview select,.contact-preview textarea { display:block; width:100%; margin-top:7px; border:1px solid #969085; border-radius:0; background:transparent; padding:12px; color:var(--ec-ink); opacity:1; }
.contact-preview button:disabled { cursor:not-allowed; background:var(--ec-sand); color:var(--ec-muted); border-color:var(--ec-line); }
.generic-content { padding-block:60px; max-width:900px; }
.generic-content h1 { margin-bottom:32px; }
.ec-local-banner { background:var(--ec-ink); color:white; padding:8px 20px; text-align:center; font:600 12px/1.5 Manrope,system-ui,sans-serif; }
@media(min-width:768px) {
 .shell { width:min(1280px,calc(100% - 80px)); }
 .section-pad { padding-block:88px; }
 .service-grid { grid-template-columns:repeat(2,1fr); column-gap:30px; }
 .project-grid,.gallery,.contact-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .principles-grid,.method-grid { grid-template-columns:repeat(2,1fr); }
 .split-heading { grid-template-columns:1fr 2fr; gap:45px; }
 .cta-inner { grid-template-columns:1.2fr 1fr; align-items:center; }
 .footer-grid { grid-template-columns:1.2fr .8fr 1fr; gap:34px; }
 .logo-cloud { grid-template-columns:repeat(4,1fr); }
 .case-facts { grid-template-columns:2fr 1fr 1fr; }
 .case-body { grid-template-columns:1fr 2fr; gap:55px; padding-block:75px; }
 .case-media { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
}
@media(min-width:1024px) {
 .desktop-nav { display:block; }
 .mobile-menu { display:none; }
 .hero { grid-template-columns:1.15fr 1fr; align-items:center; gap:36px; padding-block:70px 85px; }
 .hero-visual > img,.hero-visual > .image-placeholder { height:450px; }
 .hero-copy { padding-block:32px; }
 .hero-intro { max-width:440px; }
 .hero .button-row { gap:26px; }
 .service-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
 .service-card { padding:30px 20px; border-bottom:0; border-right:1px solid var(--ec-line); }
 .service-card:first-child { padding-left:0; }
 .service-card:last-child { padding-right:0; border-right:0; }
 .service-card :is(h2,h3) { font-size:1.18rem; }
 .principles-grid,.method-grid { grid-template-columns:repeat(4,1fr); }
 .contact-layout { grid-template-columns:1fr 1.4fr; gap:90px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Phase 3.1: restrained interaction and spacing refinements. */
.text-link:hover,.mobile-menu a:hover { text-decoration-thickness:2px; }
a:active { text-decoration-thickness:3px; }
.button:active { background:var(--ec-ochre); color:var(--ec-ink); }
.button-light:active { background:var(--ec-sand); }
.mobile-menu summary:hover,.mobile-menu summary:active { text-decoration:underline; }
.contact-preview :is(input,select,textarea):hover { border-color:var(--ec-ink); }
.contact-preview :is(input,select,textarea):focus-visible { border-color:var(--ec-ink); }
.contact-status:empty { display:none; }
.contact-status:not(:empty) { padding:16px; margin-bottom:24px; border-left:3px solid var(--ec-ink); background:var(--ec-sand); }
.contact-status[data-state="error"] { border-left-color:#8b2828; }
.contact-status:focus { outline:2px solid var(--ec-ink); outline-offset:4px; }
.projects-section:has(.page-intro) { padding-top:0; }
.projects-section .page-intro { padding-bottom:65px; }
.case-header { padding-block:48px 65px; }
@media(min-width:1024px) {
 .brand-image { width:123.2px; height:83.6px; }
 .brand-image img { width:281.6px; left:-79.2px; top:-79.2px; }
}

/* Real portfolio: typographic covers and uncropped documentary details. */
.project-typography { font-size:clamp(1.05rem,2vw,1.65rem); line-height:1.3; text-align:left; align-items:flex-start; border-top:3px solid var(--ec-ochre); min-height:0; overflow-wrap:anywhere; }
.project-card :is(h2,h3) a { overflow-wrap:anywhere; }
.case-cover img { max-height:none; height:auto; }
.gallery img { height:auto; }
.hero-visual > img { object-position:65% center; }

/* Portfolio gallery: preserve documentary composition without aggressive cropping. */
.gallery {
    align-items: start;
}

.gallery figure {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.gallery img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: var(--ec-paper);
}

@media (min-width: 768px) {
    .gallery-lead { grid-column: 1 / -1; }
}