/* =========================================================
   Persianistas Villajoyosa Manolo
   v4 — sitio de empresa estructurado
   Una tipografía, dos colores de marca, filetes en vez de
   sombras, columna lateral en páginas interiores.
   Sin píldoras, sin checks, sin degradados, sin tarjetas flotantes.
   ========================================================= */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans.woff2') format('woff2');
}

:root {
  --navy:     #0E2B41;
  --navy-2:   #1C4466;
  --orange:   #E8471F;
  --orange-2: #C93A15;

  --tx:       #1B1F24;
  --tx-2:     #4A535C;
  --tx-3:     #737C85;

  --bg:       #FFFFFF;
  --bg-2:     #F4F6F8;
  --line:     #D9DEE3;
  --line-2:   #C3CAD1;

  --f: 'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --side: 300px;
  --gut: 1rem;
  --r: 3px;

  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f); font-size: 15.5px; line-height: 1.55; color: var(--tx); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-2); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--orange); }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only:focus { position: fixed; top: 6px; left: 6px; width: auto; height: auto; clip: auto; background: var(--navy); color: #fff; padding: .5rem .8rem; z-index: 999; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: var(--wrap); }
@media (min-width: 768px) { :root { --gut: 1.5rem; } }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
@media (min-width: 900px) { h1 { font-size: 2.15rem; } h2 { font-size: 1.5rem; } }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .3em; }

.eyebrow, .eyebrow--sea, .eyebrow--inv { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin: 0 0 .5rem; background: none; padding: 0; }
.lead { font-size: 1.05rem; color: var(--tx-2); }
.pending { background: #FFF1B8; color: #5A4300; padding: 0 .3em; }

/* ---------- Botones ---------- */
.btn { display: inline-block; font-weight: 600; font-size: .95rem; padding: .7rem 1.2rem; border: 1px solid transparent; border-radius: var(--r); text-decoration: none; line-height: 1.2; cursor: pointer; text-align: center; }
.btn--solid { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn--solid:hover { background: var(--orange-2); border-color: var(--orange-2); color: #fff; }
.btn--ink { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--ink:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn--outline { background: #fff; color: var(--navy); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); }
.btn--onDark { background: #fff; color: var(--navy); border-color: #fff; }
.btn--block { display: block; width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }

/* ---------- Cabecera ---------- */
.masthead { background: #fff; border-bottom: 3px solid var(--navy); position: sticky; top: 0; z-index: 60; }
.masthead__inner { display: flex; align-items: center; gap: 1rem; min-height: 70px; }
.brand { display: block; margin-right: auto; }
.brand img { height: 40px; width: auto; }
@media (min-width: 600px) { .brand img { height: 46px; } }
@media (min-width: 1060px) { .brand img { height: 52px; } }

.masthead__tel { display: inline-flex; align-items: center; gap: .45rem; background: var(--orange); color: #fff; font-weight: 700; font-size: .95rem; padding: .62rem 1rem; border-radius: var(--r); text-decoration: none; white-space: nowrap; }
.masthead__tel:hover { background: var(--orange-2); color: #fff; }
.masthead__tel::before { content: ""; width: 15px; height: 15px; background: #fff; -webkit-mask: var(--ico-phone) center/contain no-repeat; mask: var(--ico-phone) center/contain no-repeat; }
@media (max-width: 620px) {
  .masthead__inner { gap: .6rem; }
  .masthead__tel { font-size: 0; padding: .7rem .8rem; gap: 0; }
  .masthead__tel::before { width: 20px; height: 20px; }
}
@media (max-width: 380px) { .brand img { height: 34px; } }

.navtoggle { position: absolute; opacity: 0; pointer-events: none; }
.navtoggle-label { order: 3; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; }
.navtoggle-label span { display: block; height: 2px; background: var(--navy); transition: transform .15s, opacity .15s; }
.navtoggle:checked ~ .navtoggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle:checked ~ .navtoggle-label span:nth-child(2) { opacity: 0; }
.navtoggle:checked ~ .navtoggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav { order: 4; display: none; width: 100%; border-top: 1px solid var(--line); padding: .4rem 0 .8rem; }
.navtoggle:checked ~ .nav { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav > ul > li { border-bottom: 1px solid var(--line); }
.nav a { display: block; padding: .65rem .1rem; color: var(--navy); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--orange); }
.nav__sub { padding: 0 0 .5rem 1rem; }
.nav__sub a { font-weight: 400; font-size: .92rem; padding: .38rem .1rem; }

@media (min-width: 1060px) {
  .navtoggle-label { display: none; }
  .nav { order: 2; display: block; width: auto; border: 0; padding: 0; margin-left: auto; margin-right: 1.2rem; }
  .nav > ul { display: flex; align-items: stretch; }
  .nav > ul > li { border: 0; position: relative; }
  .nav > ul > li > a { padding: 1.45rem .85rem; font-size: .93rem; border-bottom: 3px solid transparent; margin-bottom: -3px; }
  .nav > ul > li > a:hover, .nav > ul > li > a[aria-current] { border-bottom-color: var(--orange); color: var(--navy); }
  .masthead__tel { order: 3; }
  .nav__sub { position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--line-2); border-top: 3px solid var(--navy); padding: .35rem 0; margin: 0; display: none; z-index: 70; }
  .nav > ul > li:hover .nav__sub, .nav > ul > li:focus-within .nav__sub { display: block; }
  .nav__sub a { padding: .5rem 1rem; font-size: .9rem; }
  .nav__sub a:hover { background: var(--bg-2); color: var(--orange); }
  .nav__sub a[aria-current] { font-weight: 600; }
}

/* ---------- Migas ---------- */
.crumbs { font-size: .82rem; color: var(--tx-3); background: var(--bg-2); border-bottom: 1px solid var(--line); padding: .55rem 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li::after { content: "›"; margin-left: .4rem; }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--tx-2); text-decoration: none; }
.crumbs a:hover { color: var(--orange); text-decoration: underline; }

/* ---------- Héroe ---------- */
.hero { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 1.8rem 0 2rem; }
@media (min-width: 900px) { .hero { padding: 2.4rem 0 2.6rem; } }
.hero__grid { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1fr var(--side); gap: 2.5rem; align-items: start; } }
.hero__title { margin-bottom: .45em; }
.hero__lead { margin-bottom: 0; max-width: 70ch; }
.hero__tags { list-style: none; margin: 1rem 0 0; padding: 0; font-size: .9rem; color: var(--tx-2); }
.hero__tags li { display: inline; margin: 0; }
.hero__tags li + li::before { content: " · "; color: var(--line-2); margin: 0 .2em; }

/* Caja de contacto del héroe */
.ticket { border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; }
.hero__media { background: #fff; }
.ticket__head { margin: 0; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .55rem .9rem; }
.ticket__tel { display: block; margin: .8rem .9rem .35rem; font-size: 1.55rem; font-weight: 700; color: var(--navy); text-decoration: none; letter-spacing: -.01em; }
.ticket__tel::before { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -.08em; margin-right: .35em; background: var(--orange); -webkit-mask: var(--ico-phone) center/contain no-repeat; mask: var(--ico-phone) center/contain no-repeat; }
.ticket__tel:hover { color: var(--orange); }
.ticket__note { margin: 0 .9rem .8rem; font-size: .88rem; color: var(--tx-2); }
.ticket .btn { margin: 0 .9rem .6rem; width: calc(100% - 1.8rem); }

/* Foto de cabecera */
.hero__aside { display: grid; gap: 1rem; align-content: start; }
.hero__media { margin: 0; border: 1px solid var(--line-2); background: var(--bg-2); }
.hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  body.has-side .hero__grid { grid-template-columns: 1fr var(--side); }
  body.has-side .hero .ticket { display: none; }
}

/* ---------- Disposición con columna lateral ---------- */
.layout { display: grid; gap: 2rem; padding-top: 1.6rem; padding-bottom: 2.5rem; }
@media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr) var(--side); gap: 2.8rem; padding-top: 2rem; padding-bottom: 3rem; } }
.layout__main { min-width: 0; }
.layout__main .wrap { padding: 0; max-width: none; }
.layout__main .band { padding: 0; margin-bottom: 2.2rem; border-top: 0; }
.layout__main .band:last-child { margin-bottom: 0; }
.layout__main .band--alt, .layout__main .band--ink { background: var(--bg-2); border: 1px solid var(--line); padding: 1.3rem 1.4rem; }
.layout__main .band--coral { background: #fff; border: 1px solid var(--line-2); border-left: 4px solid var(--orange); padding: 1.2rem 1.4rem; color: var(--tx); }
.layout__main .band--coral h2 { font-size: 1.2rem; margin-bottom: .3em; color: var(--navy); }
.layout__main .band--coral p { margin-bottom: .6em; color: var(--tx-2); }
.layout__main .band--coral .btn--ink { background: var(--orange); border-color: var(--orange); color: #fff; }

.side-box { border: 1px solid var(--line-2); border-radius: var(--r); margin-bottom: 1.3rem; background: #fff; }
.side-box__t { margin: 0; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .55rem .9rem; }
.side-box__b { padding: .85rem .9rem; }
.side-box__b p { margin: .4rem 0 .6rem; font-size: .88rem; color: var(--tx-2); }
.side-tel { display: block; font-size: 1.5rem; font-weight: 700; color: var(--navy); text-decoration: none; letter-spacing: -.01em; }
.side-tel::before { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -.08em; margin-right: .35em; background: var(--orange); -webkit-mask: var(--ico-phone) center/contain no-repeat; mask: var(--ico-phone) center/contain no-repeat; }
.side-tel:hover { color: var(--orange); }
.side-alt { font-size: .82rem !important; word-break: break-all; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { margin: 0; border-top: 1px solid var(--line); }
.side-list li:first-child { border-top: 0; }
.side-list a { display: block; padding: .5rem .9rem; color: var(--navy); text-decoration: none; font-size: .92rem; }
.side-list a:hover { background: var(--bg-2); color: var(--orange); }
.side-list a[aria-current] { font-weight: 600; background: var(--bg-2); }
.side-list span { display: block; padding: .5rem .9rem; font-size: .92rem; color: var(--tx-2); }

/* ---------- Bloques (home, sin columna lateral) ---------- */
.band { padding: 2.2rem 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .band { padding: 2.8rem 0; } }
.band--alt, .band--ink { background: var(--bg-2); }
.band--ink h2, .band--ink h3 { color: var(--navy); }
.band--ink p { color: var(--tx-2); }
.band--coral { background: var(--navy); color: #fff; border-top: 0; }
.band--coral h2 { color: #fff; }
.band--coral p { color: #D3DEE8; }
.band--coral .btn--ink { background: var(--orange); border-color: var(--orange); }
.band--coral .btn--ink:hover { background: var(--orange-2); border-color: var(--orange-2); }

.shead { margin-bottom: 1.3rem; padding-bottom: .7rem; border-bottom: 2px solid var(--navy); }
.shead h2 { margin-bottom: .2em; }
.shead p { margin: 0; color: var(--tx-2); }
.layout__main .shead { border-bottom-width: 1px; border-bottom-color: var(--line-2); }

/* Servicios: lista a dos columnas con filetes */
.index { display: grid; gap: 0 2.5rem; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .index { grid-template-columns: 1fr 1fr; } }
.idx { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "desc" "go"; gap: .15rem .6rem; padding: .95rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--tx); }
.idx__t { grid-area: title; font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.idx:hover .idx__t { color: var(--orange); text-decoration: underline; }
.idx__d { grid-area: desc; font-size: .92rem; color: var(--tx-2); margin: 0; }
.idx__go { grid-area: go; font-size: 0; }
.idx__go::before { content: "Ver servicio →"; font-size: .85rem; color: var(--navy-2); text-decoration: underline; }

/* Ventajas: lista de definiciones */
.specs { border-top: 1px solid var(--line); }
.spec { display: grid; gap: .2rem 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .spec { grid-template-columns: 220px 1fr; } }
.spec__k { margin: 0; font-size: 1rem; font-weight: 600; color: var(--navy); }
.spec__v { margin: 0; font-size: .93rem; color: var(--tx-2); }

/* Averías: numeradas */
.faults { border-top: 1px solid var(--line); }
.fault { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.fault__h { margin: 0 0 .2rem; }
.fault h3 { margin: 0; }
.fault p { margin: 0; font-size: .93rem; color: var(--tx-2); }

/* Pasos */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line); }
.step { counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; gap: .1rem .6rem; padding: .8rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.step::before { content: counter(step); grid-row: 1 / 3; font-size: 1.15rem; font-weight: 700; color: var(--orange); }
.step h3 { margin: 0; }
.step p { margin: 0; font-size: .93rem; color: var(--tx-2); }

/* Zonas: tabla */
.zones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); display: grid; gap: 0 2.5rem; }
@media (min-width: 760px) { .zones { grid-template-columns: 1fr 1fr; } }
.zone { display: grid; grid-template-columns: 1fr; gap: 0 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); margin: 0; }
@media (min-width: 500px) { .zone { grid-template-columns: 170px 1fr; align-items: baseline; } }
.zone a { font-weight: 600; color: var(--navy); text-decoration: none; }
.zone a:hover { color: var(--orange); text-decoration: underline; }
.zone span { font-size: .88rem; color: var(--tx-2); }
.hoods { background: var(--bg-2); border: 1px solid var(--line); padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.hoods h3 { margin-bottom: .3rem; }
.hoods p { margin: 0; font-size: .93rem; color: var(--tx-2); }

/* FAQ */
.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; font-weight: 600; color: var(--navy); }
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary::after { content: "+"; color: var(--tx-3); font-weight: 400; flex: none; }
.qa__item[open] summary::after { content: "−"; }
.qa__item summary:hover { color: var(--orange); }
.qa__a { padding: 0 0 .9rem; }
.qa__a p { margin: 0; font-size: .95rem; color: var(--tx-2); max-width: 78ch; }

/* NAP */
.nap { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .nap { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.nap address { font-style: normal; line-height: 1.7; }

/* Prosa */
.prose h2 { margin-top: 1.8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.prose h3 { margin-top: 1.3rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose p, .prose li { max-width: 75ch; }
.aside-note { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--navy); padding: .9rem 1.1rem; margin: 1.3rem 0; }
.aside-note h3 { margin: 0 0 .3rem; font-size: 1rem; }
.aside-note p:last-child { margin-bottom: 0; }

/* ---------- Barra fija móvil ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-2); }
.callbar a { padding: .85rem .5rem; text-align: center; font-weight: 600; font-size: .95rem; text-decoration: none; }
.callbar a:first-child { background: var(--orange); color: #fff; }
.callbar a:first-child::before { content: ""; display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: .4rem; background: #fff; -webkit-mask: var(--ico-phone) center/contain no-repeat; mask: var(--ico-phone) center/contain no-repeat; }
body { padding-bottom: 52px; }
@media (min-width: 1060px) { .callbar { display: none; } body { padding-bottom: 0; } }

/* ---------- Pie ---------- */
.foot { background: var(--navy); color: #C9D4DE; border-top: 4px solid var(--orange); padding: 2.4rem 0 0; font-size: .9rem; }
.foot__grid { display: grid; gap: 1.8rem; }
@media (min-width: 700px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.4rem; } }
.foot h3 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .7rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.foot__brand { color: #fff; font-weight: 700; font-size: 1.05rem; margin: 0 0 .6rem; }
.foot address { font-style: normal; line-height: 1.7; margin-bottom: .6rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .35rem; }
.foot a { color: #C9D4DE; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__bottom { margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); padding: .9rem 0; font-size: .82rem; color: #93A4B4; }
.foot__bottom p { margin: 0; }

/* Miniaturas de servicio en la home */
.idx { grid-template-columns: 1fr; grid-template-areas: "img" "title" "desc" "go"; }
.idx__img { grid-area: img; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line); margin-bottom: .6rem; }
@media (min-width: 560px) {
  .idx { grid-template-columns: 150px 1fr; column-gap: 1rem; grid-template-areas: "img title" "img desc" "img go"; }
  .idx__img { margin: 0; aspect-ratio: 3 / 2; align-self: start; }
}


/* Índice de servicios en el héroe de la home */
.hero__services { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line-2); }
.hero__services-t { margin: 0 0 .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.hero__services ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; }
@media (min-width: 640px) { .hero__services ul { grid-template-columns: 1fr 1fr; } }
.hero__services li { margin: 0; border-bottom: 1px solid var(--line); }
.hero__services li a { display: block; padding: .5rem 0; text-decoration: none; color: var(--tx); }
.hero__services b { display: block; font-weight: 600; color: var(--navy); }
.hero__services li a:hover b { color: var(--orange); text-decoration: underline; }
.hero__services span { display: block; font-size: .85rem; color: var(--tx-2); }
.hero__zones { margin: .9rem 0 0; font-size: .88rem; color: var(--tx-2); }
.hero__zones a { display: inline; color: var(--navy-2); text-decoration: underline; text-decoration-color: var(--line-2); }
.hero__zones a:hover { color: var(--orange); text-decoration: underline; }