/* ============================================================
   Law Office of Irma Yanet Ramirez P.A. - styles.css
   Swap the --brand-* / --accent-* block per trade and the rest follows.
   Never hardcode a hex, gap, or radius below the token block.
   ============================================================ */

:root{
  /* Brand - trade palette table in references/design-tokens.md */
  --brand-900:#33141A; --brand-700:#4A1D22; --brand-500:#6B3038;
  --brand-300:#B08A90; --brand-100:#F2E7E3;
  --accent-500:#C9A96A; --accent-600:#AD8C4E;

  /* Warm neutrals. Pure grays read cold and are the strongest tell of a generated site. */
  --ink:#141917; --ink-2:#3D4A44; --ink-3:#6B7A73;
  --surface:#FBF9F5; --surface-2:#F2EFE8; --line:#E2DED4;
  --ok:#1E7A4C; --danger:#B03030;

  --step--1:clamp(.83rem,.8rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(1.9rem,1.5rem + 2vw,3rem);
  --step-4:clamp(2.4rem,1.7rem + 3.4vw,4.2rem);

  --font-display:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --leading-tight:1.12; --leading-body:1.6; --measure:64ch;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  --radius:10px; --radius-lg:18px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgb(20 25 23 / .06), 0 2px 8px rgb(20 25 23 / .05);
  --shadow-2:0 4px 12px rgb(20 25 23 / .08), 0 16px 40px rgb(20 25 23 / .10);

  --container:1180px; --gutter:clamp(1rem,4vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.5s;
  --header-h:72px;
}
@media (prefers-reduced-motion:reduce){ :root{ --dur:0.01ms } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--s4))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);
  font:var(--step-0)/var(--leading-body) var(--font-body);-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:var(--leading-tight);margin:0 0 var(--s4);font-family:var(--font-display);font-weight:600}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-1)}
p{margin:0 0 var(--s4);max-width:var(--measure)}
a{color:var(--brand-500)}
:focus-visible{outline:3px solid var(--accent-500);outline-offset:2px}

.wrap{width:min(var(--container),100% - var(--gutter)*2);margin-inline:auto}
.wrap.narrow{width:min(760px,100% - var(--gutter)*2)}
.section{padding-block:var(--s9)}
.section-alt{background:var(--surface-2)}
@media (max-width:640px){.section{padding-block:var(--s7)}}
.section-sub{color:var(--ink-2);font-size:var(--step-1)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:100;background:var(--surface);padding:var(--s3) var(--s4);border-radius:var(--radius)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s6);border:0;border-radius:var(--radius-pill);
  font:600 var(--step-0)/1 var(--font-body);text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn-primary{background:var(--accent-500);color:var(--surface);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-600);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--brand-700);border:1px solid var(--line)}
.btn-ghost-light{background:rgb(255 255 255 / .12);color:#fff;border:1px solid rgb(255 255 255 / .35);
  backdrop-filter:blur(4px)}
.btn-ghost-light:hover{background:rgb(255 255 255 / .2)}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgb(251 249 245 / .92);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.site-header.is-stuck{box-shadow:var(--shadow-1);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:var(--header-h)}
.nav{display:flex;align-items:center;gap:var(--s5)}
.nav a{color:var(--ink);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--brand-500)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:0;border:0;padding:var(--s3);cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav{position:absolute;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;
    gap:0;padding:var(--s4) var(--gutter);background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-2);display:none}
  .nav.is-open{display:flex}
  .nav a{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
}

/* ---------- hero ----------
   Poster is the LCP element. Video sits above it at opacity 0 and fades in
   only once main.js has attached and started it, so a slow or skipped video
   never leaves a blank hero. */
.hero{position:relative;isolation:isolate;color:#fff;padding-block:var(--s9) var(--s8);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{opacity:0;transition:opacity 1s var(--ease)}
.hero-video.is-playing{opacity:1}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(0 0 0 / .74) 0%,rgb(0 0 0 / .58) 55%,rgb(0 0 0 / .42) 100%)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
/* Grid items default to min-width:auto, so a wide child - a long button label,
   an unbreakable string - forces the track wider than the container and the
   whole column overflows. min-width:0 is the fix and it is not optional. */
.hero-inner > *{min-width:0}
@media (max-width:940px){.hero-inner{grid-template-columns:1fr;gap:var(--s6)}}
.hero-copy h1{color:#fff;text-wrap:balance}
.eyebrow{font-size:var(--step--1);letter-spacing:.09em;text-transform:uppercase;
  color:rgb(255 255 255 / .82);margin-bottom:var(--s3)}
.lead{font-size:var(--step-1);color:rgb(255 255 255 / .93)}
.ticks{list-style:none;padding:0;margin:0 0 var(--s6);display:grid;gap:var(--s2)}
.ticks li{padding-left:var(--s6);position:relative;color:rgb(255 255 255 / .93)}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;
  border-left:2.5px solid var(--accent-500);border-bottom:2.5px solid var(--accent-500);transform:rotate(-45deg)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- form card ---------- */
.form-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s6);box-shadow:var(--shadow-2)}
.form-title{font-size:var(--step-2);margin-bottom:var(--s2)}
.form-sub{color:var(--ink-2);font-size:var(--step--1);margin-bottom:var(--s5)}
.field{margin-bottom:var(--s4)}
/* Labels above inputs, never placeholder-only - placeholders vanish on focus
   and people forget what the field was. */
.field label{display:block;font-weight:600;font-size:var(--step--1);margin-bottom:var(--s1)}
/* Longhand, not the `font:` shorthand. <select> does not reliably inherit the
   shorthand and falls back to the UA default of ~13px - which is under 16px,
   so iOS zooms the whole page the moment the field is focused and the visitor
   loses their place mid-form. Set font-size explicitly. */
.field input,.field select{width:100%;min-height:48px;padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  font-family:var(--font-body);font-size:max(16px,var(--step-0));line-height:1.3;
  color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--brand-500);outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 22%,transparent)}
.form-note{font-size:var(--step--1);color:var(--ink-3);margin:var(--s3) 0 0;text-align:center}
.hp{position:absolute;left:-9999px}

/* ---------- trust bar ---------- */
.trustbar{background:var(--brand-100);border-block:1px solid var(--line)}
.trustbar-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);padding-block:var(--s5);text-align:center}
/* MUST be a direct-child selector. `.trustbar div` (0,1,1) also matches
   .trustbar-inner itself - it is a div inside .trustbar - and outranks
   .trustbar-inner (0,1,0), silently replacing the 4-column grid with a
   single stacked flex column. */
.trustbar-inner > div{display:flex;flex-direction:column;gap:2px}
.trustbar strong{font-size:var(--step-1);color:var(--brand-700);font-family:var(--font-display)}
.trustbar span{font-size:var(--step--1);color:var(--ink-2)}
@media (max-width:720px){.trustbar-inner{grid-template-columns:repeat(2,1fr);gap:var(--s5)}}

/* ---------- cards / steps / gallery ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--s5)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.card-icon{width:32px;height:32px;color:var(--brand-500);fill:none;stroke:currentColor;stroke-width:1.7;margin-bottom:var(--s3)}
.card-link{font-weight:600;text-decoration:none}
.card-link::after{content:" \2192"}
.card.review p{font-size:var(--step-0);font-style:italic}
.card.review cite{font-style:normal;font-weight:600;color:var(--ink-2);font-size:var(--step--1)}

.steps{list-style:none;counter-reset:step;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s6)}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-pill);
  background:var(--brand-700);color:var(--surface);font-weight:700;margin-bottom:var(--s3)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4)}
.gallery figure{margin:0}
.gallery img{border-radius:var(--radius);width:100%;object-fit:cover;aspect-ratio:4/3}
.gallery figcaption{font-size:var(--step--1);color:var(--ink-3);padding-top:var(--s2)}

.area-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.area-list a{background:var(--brand-100);color:var(--brand-700);text-decoration:none;
  padding:var(--s2) var(--s4);border-radius:var(--radius-pill);font-size:var(--step--1);font-weight:500}
.map{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius-lg)}

.faq{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--step-1);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--brand-500);font-weight:400}
.faq[open] summary::after{content:"\2013"}
.faq p{margin-top:var(--s3);color:var(--ink-2)}

/* ---------- cta band / footer ---------- */
.cta-band{background:var(--brand-900);color:#fff;padding-block:var(--s8);text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgb(255 255 255 / .85);margin-inline:auto}
.cta-inner .hero-actions{justify-content:center}

.site-footer{background:var(--brand-900);color:rgb(255 255 255 / .78);padding-top:var(--s8);font-size:var(--step--1)}
.footer-inner{display:grid;grid-template-columns:1fr 2fr;gap:var(--s7);padding-bottom:var(--s7)}
@media (max-width:820px){.footer-inner{grid-template-columns:1fr}}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
@media (max-width:560px){.footer-nav{grid-template-columns:1fr}}
.footer-nav h3{color:#fff;font-size:var(--step-0);margin-bottom:var(--s3)}
.footer-nav a{display:block;color:rgb(255 255 255 / .78);text-decoration:none;padding:var(--s1) 0}
.footer-nav a:hover{color:#fff}
.nap{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.nap img{max-width:170px;height:auto}
.hours,.license{margin:0}
.license{color:var(--brand-300)}
.logo{display:inline-flex;align-items:center}
.logo img{max-width:230px;height:auto}
.site-footer address{font-style:normal;line-height:1.8}
.site-footer a{color:rgb(255 255 255 / .9)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);
  padding-block:var(--s4);border-top:1px solid rgb(255 255 255 / .14)}
.footer-base p{margin:0}
.onyxia-tag{color:rgb(255 255 255 / .6);text-decoration:none}
.onyxia-tag span{color:#fff;font-weight:600}

/* ============================================================
   MOBILE
   Most local-service traffic is a phone on cellular, often with the
   problem in front of them. Every rule below fixes a defect measured on
   a real build, not a hypothetical.
   ============================================================ */

/* Sticky tap-to-call. Essential for emergency and on-the-move trades
   (locksmith, tow, plumber, HVAC, glass): these pages run 10,000px+ once
   tables stack, and the visitor must be able to call from any point. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:var(--s2);padding:var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--brand-900);border-top:1px solid rgb(255 255 255 / .14);
  box-shadow:0 -4px 18px rgb(0 0 0 / .28)}
.callbar a{flex:1;min-height:52px;font-size:var(--step-0)}
.callbar .btn-ghost-light{flex:0 0 40%}

@media (max-width:860px){
  .callbar{display:flex}
  /* Pad the FOOTER, not the body - body padding leaves a pale strip
     below a dark footer. Bar is ~80px plus the safe-area inset. */
  .site-footer{padding-bottom:104px}
}

/* Tables become stacked cards. A 3-column table measures ~630px inside a
   341px phone; horizontal scrolling inside a table will kill a pricing
   page, which is the one page that has to be effortless.
   Requires data-label="..." on each <td>. */
@media (max-width:700px){
  .price-table{border:0;background:none;overflow:visible}
  .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .price-table table,.price-table tbody,.price-table tr,.price-table th,.price-table td{display:block;width:100%}
  .price-table tr{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);margin-bottom:var(--s4);padding:var(--s4) var(--s5)}
  .price-table tbody th{border:0;padding:0 0 var(--s2);font-size:var(--step-1)}
  .price-table tbody td{border:0;padding:var(--s1) 0;display:flex;justify-content:space-between;
    align-items:baseline;gap:var(--s4)}
  .price-table tbody td::before{content:attr(data-label);font-size:var(--step--1);
    color:var(--ink-3);font-weight:600;flex:0 0 auto}
  .price-table tbody td.note{display:block}
  .price-table tbody td.note::before{display:block;margin-bottom:2px}
  /* nowrap suits "$120 to $320" and breaks any comparison table whose
     cells hold prose - it forced one 85px past the viewport. */
  .price-table .price{font-size:var(--step-1);white-space:normal;text-align:right}
}

/* Tap targets. Card, footer and pill links land at 21-26px by default,
   well under the 44px minimum, and this audience taps one-handed in a hurry. */
@media (max-width:860px){
  .nav a,.footer-nav a,.area-list a,.card-link,.card h3 a,.price-table tbody th a{
    min-height:44px;display:flex;align-items:center}
  .area-list a{justify-content:center;padding-inline:var(--s5)}
  .footer-base a,.site-footer address a{min-height:44px;display:inline-flex;align-items:center}
  .site-footer address{line-height:2.4}
  .nav-toggle{min-width:44px;min-height:44px;align-items:center}
  .hero-actions .btn,.cta-inner .btn{width:100%}
}

/* Inputs must be >=16px or iOS zooms the page on focus and the visitor
   loses their place mid-form. --step-0 already clears this; do not
   shrink form fields below it on mobile. */

/* ---------- scroll reveal ----------
   Content is in the HTML and hidden with CSS, then revealed by main.js.
   Never inject copy with JS - crawlers that do not run it must see every word. */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* If JS fails or is blocked, nothing should stay invisible. */
.no-js .reveal{opacity:1;transform:none}

/* ---------- family additions ---------- */
.preview-banner{background:#3B2F1A;color:#F5E9CF;padding:.6rem var(--gutter);font-size:var(--step--1);text-align:center}
.preview-banner .ph{background:none;border:none;color:#F0C36D;padding:0}
.ph{background:#FFF3D6;border:1px dashed #D9A62E;border-radius:4px;padding:0 .3em;color:#7A5A10}
.hero .ph,.site-footer .ph{background:rgb(255 243 214 / .14);color:#F0C36D;border-color:rgb(217 166 46 / .5)}
.promise{background:var(--brand-900);color:#fff;padding-block:var(--s8)}
.promise h2{color:#fff}
.promise-quote{margin:0 0 var(--s4);font-size:var(--step-2);font-family:var(--font-display)}
.promise-quote cite{display:block;font-size:var(--step--1);opacity:.7;margin-top:var(--s2);font-style:normal}
.promise-copy{color:rgb(255 255 255 / .88);max-width:var(--measure)}
.photo-slot{border:2px dashed var(--line);border-radius:var(--radius-lg);padding:var(--s6);background:var(--surface-2)}
.photo-slot-note{font-size:var(--step--1);color:var(--ink-3)}
.card-price{font-weight:700;color:var(--brand-500);font-variant-numeric:tabular-nums}
.hero-note{font-size:var(--step--1);color:rgb(255 255 255 / .75);margin-top:var(--s3)}
.footer-h{color:#fff;font-size:var(--step-0);font-weight:700;margin:0 0 var(--s3)}
.price-caveat{font-size:var(--step--1);color:var(--ink-3)}
.btn-sm{min-height:40px;padding:var(--s2) var(--s4)}
.btn-lg{min-height:54px;padding:var(--s4) var(--s7)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lang-switch{display:flex;gap:var(--s3);font-size:var(--step--1);margin-left:var(--s4)}
.lang-switch a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.lang-switch a:hover{color:var(--brand-500)}
.lang-switch span[aria-current]{font-weight:700;color:var(--brand-500);min-height:44px;display:inline-flex;align-items:center}
@media (max-width:860px){.lang-switch{margin-left:auto;margin-right:var(--s3)}}
.logo{min-height:44px}