/* ==========================================================================
   IRANI.es — hoja de estilos compartida
   Sitio en farsi (RTL) para ciudadanos iraníes en España. Base para todas
   las páginas. Adaptada del sistema de diseño de HIJRA.es (mismo esqueleto)
   con la paleta del logo: verde y rojo de la bandera iraní, --warning en
   ámbar aparte para no confundir avisos con el rojo de "aviso oficial".
   ========================================================================== */

:root{
  --primary:#1f7a3d;
  --primary-dark:#123f22;
  --accent:#c62828;
  --accent-light:#f3d0d0;
  --warning:#a9720f;
  --bg:#f6f7f5;
  --white:#ffffff;
  --text:#17211f;
  --muted:#66706e;
  --border:#dedfd9;
  --shadow:0 18px 50px rgba(18,63,34,.14);
  --radius:22px;
  --header-h:78px;
}

*{box-sizing:border-box}

/* scroll-padding-top evita que el header sticky tape el título de la sección
   de destino al pulsar un enlace ancla. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 18px);
}

body{
  margin:0;
  font-family:"Vazirmatn",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.8;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}

.container{
  width:min(1180px,calc(100% - 36px));
  margin-inline:auto;
}

/* Etiqueta accesible visualmente oculta. El farsi se lee con lector de
   pantalla igual que cualquier otro idioma: los placeholders no bastan. */
.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;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */

.topbar{
  background:var(--primary-dark);
  color:#dcead9;
  font-size:.9rem;
}

.topbar-inner{
  min-height:40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.topbar-links{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
}

.topbar-links a:hover{color:var(--accent-light)}

/* ── Header y navegación ────────────────────────────────────────────────── */

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,122,61,.08);
}

.nav{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.55rem;
  color:var(--primary);
  direction:ltr;
}

.logo-mark{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:var(--white);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 8px 22px rgba(18,63,34,.25);
  font-size:1.2rem;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  font-weight:600;
  color:#33423f;
}

.nav-links a:hover{color:var(--accent)}
.nav-links a[aria-current="page"]{color:var(--accent)}

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  color:var(--primary);
  font-size:1.7rem;
  cursor:pointer;
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 25px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
}

.btn-primary{
  color:var(--white);
  background:var(--primary);
  box-shadow:0 12px 28px rgba(18,63,34,.22);
}

.btn-primary:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

.btn-light{
  background:var(--white);
  color:var(--primary);
  border-color:rgba(31,122,61,.15);
}

.btn-light:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}

/* ── Hero de portada ────────────────────────────────────────────────────── */

.hero{
  position:relative;
  overflow:hidden;
  padding:90px 0 74px;
  background:
    radial-gradient(circle at 12% 20%,rgba(198,40,40,.18),transparent 30%),
    linear-gradient(135deg,#f7f8f6 0%,#eef3ec 100%);
}

.hero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border:70px solid rgba(31,122,61,.05);
  border-radius:50%;
  left:-140px;
  bottom:-210px;
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:64px;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--primary);
  background:#e6f0e2;
  padding:7px 14px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:700;
  margin-bottom:22px;
}

.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}

h1,h2,h3,h4,p{margin-top:0}

/* Sin letter-spacing negativo: el farsi es escritura cursiva conectada y el
   tracking negativo aprieta las uniones de los glifos. */
h1{
  max-width:760px;
  font-size:clamp(2.35rem,5vw,4.6rem);
  line-height:1.25;
  margin-bottom:24px;
  color:var(--primary-dark);
}

h1 span{color:var(--accent)}

.hero-text{
  font-size:1.13rem;
  color:var(--muted);
  max-width:720px;
  margin-bottom:30px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:30px;
}

.trust-list{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:#40504d;
  font-size:.94rem;
  font-weight:600;
}

.trust-item{
  display:flex;
  align-items:center;
  gap:8px;
}

.check{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dbecdd;
  color:var(--primary);
  font-weight:800;
}

.hero-card{
  position:relative;
  background:var(--white);
  border:1px solid rgba(31,122,61,.09);
  border-radius:30px;
  padding:34px;
  box-shadow:var(--shadow);
}

.hero-card::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(198,40,40,.3);
  border-radius:22px;
  pointer-events:none;
}

.legal-symbol{
  width:88px;
  height:88px;
  margin:0 auto 24px;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--primary),var(--primary-dark));
  color:var(--accent-light);
  box-shadow:0 18px 35px rgba(18,63,34,.25);
}

.legal-symbol svg{width:44px;height:44px}

.hero-card h2{
  font-size:1.55rem;
  color:var(--primary-dark);
  text-align:center;
  margin-bottom:10px;
}

.hero-card > p{
  text-align:center;
  color:var(--muted);
  margin-bottom:26px;
}

/* ── Formularios ────────────────────────────────────────────────────────── */

.quick-form{
  display:grid;
  gap:12px;
  position:relative;
  z-index:1;
}

.field{
  width:100%;
  min-height:52px;
  padding:12px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#fbfbf9;
  color:var(--text);
  outline:none;
  transition:.2s ease;
}

.field:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(198,40,40,.15);
}

textarea.field{
  min-height:110px;
  resize:vertical;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.full{grid-column:1/-1}

.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:.88rem;
}

.consent input{margin-top:7px}

.form-result{
  display:none;
  padding:13px 15px;
  border-radius:12px;
  font-weight:600;
  text-align:center;
}

.form-result.is-pending{background:#e6f0e2;color:#1f7a3d}
.form-result.is-ok{background:#e3f4e8;color:#1f7a3d}
.form-result.is-error{background:#fbe8e8;color:#9d2424}

/* ── Franja de experiencia / sede en Madrid ─────────────────────────────── */

.experience-strip{
  background:var(--white);
  border-top:1px solid rgba(31,122,61,.08);
  border-bottom:1px solid rgba(31,122,61,.08);
  padding:34px 0;
}

.experience-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:center;
}

.experience-copy h2{
  color:var(--primary-dark);
  font-size:clamp(1.65rem,3vw,2.45rem);
  line-height:1.4;
  margin-bottom:10px;
}

.experience-copy p{
  color:var(--muted);
  margin-bottom:0;
}

.consulates{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Enlaces a /ciudades/ y /consulados/*: es el enlazado interno que sostiene
   el silo, no chips inertes. */
.consulate{
  padding:9px 14px;
  border-radius:999px;
  background:#eaf4e7;
  color:var(--primary);
  font-weight:700;
  font-size:.92rem;
  border:1px solid rgba(31,122,61,.08);
  transition:.2s ease;
}

a.consulate:hover{
  border-color:var(--accent);
  background:var(--white);
  transform:translateY(-2px);
}

/* ── Secciones genéricas ────────────────────────────────────────────────── */

section{padding:90px 0}

.section-head{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}

.section-head h2{
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.35;
  color:var(--primary-dark);
  margin-bottom:14px;
}

.section-head p{
  color:var(--muted);
  font-size:1.05rem;
}

/* ── Tarjetas de servicio ───────────────────────────────────────────────── */

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.service-card{
  background:var(--white);
  border:1px solid rgba(31,122,61,.08);
  border-radius:var(--radius);
  padding:29px;
  transition:.25s ease;
  box-shadow:0 10px 30px rgba(18,63,34,.06);
}

.service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(198,40,40,.7);
  box-shadow:var(--shadow);
}

/* Iconos en SVG, no emoji: 🇪🇸 no renderiza en Windows y el resto varía
   entre plataformas. */
.service-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#e6f0e2;
  color:var(--primary);
  margin-bottom:20px;
}

.service-icon svg{width:26px;height:26px}

.service-card h3{
  color:var(--primary-dark);
  font-size:1.25rem;
  margin-bottom:10px;
}

.service-card p{
  color:var(--muted);
  font-size:.96rem;
  margin:0 0 14px;
}

.service-more{
  color:var(--primary);
  font-weight:700;
  font-size:.93rem;
  border-bottom:1px solid rgba(198,40,40,.55);
}

.service-more:hover{color:var(--accent)}

/* ── Sección "quiénes somos" ────────────────────────────────────────────── */

.about{
  background:var(--primary-dark);
  color:var(--white);
  overflow:hidden;
  position:relative;
}

.about::before{
  content:"IRANI";
  position:absolute;
  left:1%;
  bottom:-40px;
  font-size:11rem;
  line-height:1;
  font-weight:800;
  color:rgba(255,255,255,.025);
  direction:ltr;
}

.about-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:center;
}

.about-visual{
  min-height:430px;
  border-radius:30px;
  background:linear-gradient(140deg,var(--primary),var(--primary-dark));
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.about-visual::after{
  content:"";
  position:absolute;
  width:340px;height:340px;
  border:60px solid rgba(198,40,40,.09);
  border-radius:50%;
  top:-80px;right:-90px;
}

.experience-card{
  position:absolute;
  bottom:24px;
  right:24px;
  left:24px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  color:var(--primary-dark);
  border-radius:18px;
  padding:18px 20px;
  font-weight:700;
  z-index:1;
}

.about-copy .eyebrow{
  color:var(--accent-light);
  background:rgba(255,255,255,.08);
}

.about-copy h2{
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.4;
  margin-bottom:20px;
}

.about-copy p{color:#cfe0d2}

.values{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:28px;
}

.value{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(255,255,255,.04);
}

.value strong{display:block;margin-bottom:2px}
.value small{color:#a9c2ae}

/* ── Pasos del proceso ──────────────────────────────────────────────────── */

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  counter-reset:step;
}

.step{
  counter-increment:step;
  position:relative;
  padding:28px 24px;
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid rgba(31,122,61,.08);
}

.step::before{
  content:counter(step,decimal-leading-zero);
  display:block;
  color:var(--accent);
  font-size:2.2rem;
  line-height:1;
  font-weight:800;
  margin-bottom:18px;
  direction:ltr;
  text-align:right;
}

.step h3{
  color:var(--primary-dark);
  margin-bottom:8px;
}

.step p{
  color:var(--muted);
  font-size:.93rem;
  margin-bottom:0;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq{background:#eef1f3}

.faq-list{
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:13px;
}

details{
  background:var(--white);
  border:1px solid rgba(31,122,61,.08);
  border-radius:16px;
  padding:0 20px;
}

summary{
  cursor:pointer;
  list-style:none;
  padding:20px 0;
  color:var(--primary-dark);
  font-weight:700;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}

summary::-webkit-details-marker{display:none}

summary::after{
  content:"+";
  color:var(--accent);
  font-size:1.7rem;
  font-weight:500;
  flex:0 0 auto;
}

details[open] summary::after{content:"−"}

details p{
  color:var(--muted);
  padding:0 0 20px;
  margin:0;
}

/* ── Contacto ───────────────────────────────────────────────────────────── */

.contact{background:linear-gradient(135deg,#f7f8f6,#ffffff)}

.contact-form{
  border-radius:26px;
  padding:38px;
  background:var(--white);
  border:1px solid rgba(31,122,61,.09);
  box-shadow:var(--shadow);
}

/* El formulario es el único canal de contacto, así que va centrado y solo
   en lugar de compartir rejilla con un panel de datos. */
.contact-single{
  max-width:760px;
  margin-inline:auto;
}

.contact-form h2{
  color:var(--primary-dark);
  font-size:1.7rem;
  margin-bottom:7px;
}

.contact-form > p{
  color:var(--muted);
  margin-bottom:22px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer{
  background:var(--primary-dark);
  color:#c3d6c8;
  padding:30px 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:.9rem;
}

.footer-links a:hover{color:var(--accent-light)}

/* ==========================================================================
   SUBPÁGINAS — silos de procedimientos, ciudades y consulados
   ========================================================================== */

/* ── Hero reducido ──────────────────────────────────────────────────────── */

.page-hero{
  padding:54px 0 46px;
  background:
    radial-gradient(circle at 88% 10%,rgba(198,40,40,.16),transparent 34%),
    linear-gradient(135deg,#f7f8f6 0%,#eef3ec 100%);
}

.page-hero h1{
  font-size:clamp(1.95rem,3.6vw,3.1rem);
  margin-bottom:16px;
  max-width:900px;
}

.page-hero .lead{
  font-size:1.1rem;
  color:var(--muted);
  max-width:820px;
  margin-bottom:26px;
}

/* ── Migas de pan ───────────────────────────────────────────────────────── */

.breadcrumb{
  padding:14px 0;
  font-size:.88rem;
  color:var(--muted);
}

.breadcrumb ol{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.breadcrumb li{display:flex;align-items:center;gap:8px}

.breadcrumb li+li::before{
  content:"‹";
  color:var(--accent);
  font-weight:700;
}

.breadcrumb a:hover{color:var(--primary)}
.breadcrumb [aria-current="page"]{color:var(--primary-dark);font-weight:600}

/* ── Cuerpo de artículo ─────────────────────────────────────────────────── */

.page-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:44px;
  align-items:start;
}

.prose{max-width:820px}

.prose h2{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--primary-dark);
  margin:44px 0 14px;
  line-height:1.4;
}

.prose h2:first-child{margin-top:0}

.prose h3{
  font-size:1.2rem;
  color:var(--primary-dark);
  margin:30px 0 10px;
}

.prose p{margin-bottom:18px}

.prose ul,.prose ol{
  margin:0 0 20px;
  padding-inline-start:22px;
  color:#33423f;
}

.prose li{margin-bottom:9px}

.prose strong{color:var(--primary-dark)}

.prose a:not(.btn){
  color:var(--primary);
  font-weight:600;
  border-bottom:1px solid rgba(198,40,40,.55);
}

.prose a:not(.btn):hover{color:var(--accent)}

/* ── Tabla de datos (requisitos, plazos, comparativas) ──────────────────── */

.table-wrap{
  overflow-x:auto;
  margin:0 0 26px;
  border:1px solid rgba(31,122,61,.1);
  border-radius:16px;
  background:var(--white);
}

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  min-width:520px;
}

.data-table th,
.data-table td{
  padding:13px 16px;
  text-align:start;
  border-bottom:1px solid rgba(31,122,61,.08);
  vertical-align:top;
}

.data-table thead th{
  background:#eaf3e9;
  color:var(--primary-dark);
  font-weight:700;
  white-space:nowrap;
}

.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#fafaf7}

/* ── Cajas de aviso ─────────────────────────────────────────────────────── */

.notice{
  padding:18px 20px;
  border-radius:16px;
  border:1px solid rgba(31,122,61,.12);
  background:var(--white);
  margin:0 0 26px;
  font-size:.95rem;
}

.notice strong{display:block;margin-bottom:4px;color:var(--primary-dark)}
.notice p{margin:0;color:var(--muted)}

.notice-info{
  border-inline-start:4px solid var(--primary);
  background:#eef6f0;
}

.notice-warning{
  border-inline-start:4px solid var(--warning);
  background:#fbf3e2;
}

/* Aviso obligatorio en /consulados/*: el público iraní que busca visados es
   blanco de intermediarios fraudulentos y la página no debe poder
   confundirse con la sede oficial de la Embajada. */
.notice-official{
  border-inline-start:4px solid #9d2424;
  background:#fdf3f3;
}

.notice-official strong{color:#9d2424}

/* ── Requisitos con marca de verificación ───────────────────────────────── */

.requirements{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:11px;
}

.requirements li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px 17px;
  background:var(--white);
  border:1px solid rgba(31,122,61,.08);
  border-radius:14px;
  margin:0;
}

/* ── Barra lateral ──────────────────────────────────────────────────────── */

.sidebar{
  position:sticky;
  top:calc(var(--header-h) + 20px);
  display:grid;
  gap:18px;
}

.sidebar-card{
  background:var(--white);
  border:1px solid rgba(31,122,61,.09);
  border-radius:20px;
  padding:24px;
  box-shadow:0 10px 30px rgba(18,63,34,.06);
}

.sidebar-card h2,
.sidebar-card h3{
  font-size:1.15rem;
  color:var(--primary-dark);
  margin-bottom:12px;
}

.sidebar-card p{
  color:var(--muted);
  font-size:.93rem;
  margin-bottom:16px;
}

.sidebar-card .btn{width:100%}

.sidebar-cta{
  background:var(--primary);
  border-color:transparent;
  color:var(--white);
}

.sidebar-cta h2,
.sidebar-cta h3{color:var(--white)}
.sidebar-cta p{color:#d6e6d9}
.sidebar-cta .btn{background:var(--accent);color:var(--white);box-shadow:none}
.sidebar-cta .btn:hover{background:var(--accent-light);color:var(--primary-dark)}

/* Índice de contenidos */
.toc{list-style:none;margin:0;padding:0;font-size:.93rem;display:grid;gap:9px}
.toc a{color:#33423f;font-weight:600}
.toc a:hover{color:var(--accent)}

/* ── Enlazado interno relacionado ───────────────────────────────────────── */

.related{
  background:#eef1f3;
  border-top:1px solid rgba(31,122,61,.08);
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.related-card{
  display:block;
  background:var(--white);
  border:1px solid rgba(31,122,61,.08);
  border-radius:18px;
  padding:22px;
  transition:.25s ease;
}

.related-card:hover{
  transform:translateY(-4px);
  border-color:rgba(198,40,40,.7);
  box-shadow:var(--shadow);
}

.related-card h3{
  font-size:1.08rem;
  color:var(--primary-dark);
  margin-bottom:7px;
}

.related-card p{
  color:var(--muted);
  font-size:.92rem;
  margin:0;
}

/* ── Mapa de zona de actuación ──────────────────────────────────────────── */

.map-frame{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(18,63,34,.1);
  border:1px solid rgba(31,122,61,.08);
}

.map-frame iframe{
  display:block;
  width:100%;
  height:380px;
  border:0;
  filter:grayscale(1) contrast(1.05);
  transition:filter .3s ease;
}

.map-frame iframe:hover,
.map-frame iframe:focus{
  filter:grayscale(.15) contrast(1);
}

/* ── Rejilla de enlaces (hubs de silo) ──────────────────────────────────── */

.link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}

/* ── Franja CTA de cierre ───────────────────────────────────────────────── */

.cta-band{
  background:var(--primary-dark);
  color:var(--white);
  text-align:center;
}

.cta-band h2{
  font-size:clamp(1.7rem,3.2vw,2.6rem);
  line-height:1.4;
  margin-bottom:14px;
  max-width:760px;
  margin-inline:auto;
}

.cta-band p{
  color:#c9d6de;
  max-width:640px;
  margin:0 auto 26px;
}

.cta-band .btn-light{background:var(--accent);color:var(--white);border-color:transparent}
.cta-band .btn-light:hover{background:var(--accent-light);color:var(--primary-dark)}

.cta-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1080px){
  .page-layout{grid-template-columns:1fr}
  .sidebar{position:static;grid-template-columns:repeat(2,1fr)}
}

@media (max-width:980px){
  .hero-grid,.about-grid,.experience-grid{
    grid-template-columns:1fr;
  }

  .services-grid,.related-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .about-visual{min-height:370px}

  .menu-toggle{display:block}

  .nav-links{
    display:none;
    position:absolute;
    top:var(--header-h);
    right:18px;
    left:18px;
    flex-direction:column;
    align-items:stretch;
    background:var(--white);
    padding:22px;
    border-radius:18px;
    box-shadow:var(--shadow);
    border:1px solid rgba(31,122,61,.08);
  }

  .nav-links.open{display:flex}
  .nav .btn-primary.desktop{display:none}
}

@media (max-width:640px){
  .topbar-inner{
    justify-content:center;
    text-align:center;
    flex-wrap:wrap;
    gap:6px 16px;
  }

  .topbar-hours{display:none}
  .hero{padding-top:62px}
  section{padding:68px 0}
  .services-grid,.steps,.values,.form-grid,.related-grid,.sidebar{
    grid-template-columns:1fr;
  }
  .map-frame iframe{height:280px}
  .hero-card,.contact-form{padding:26px}
  .full{grid-column:auto}
  h1{font-size:2.45rem}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .footer-inner{justify-content:center;text-align:center}
  .footer-links{justify-content:center}
}

/* Respeta la preferencia de movimiento reducido del sistema. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
  .btn:hover,.service-card:hover,.related-card:hover{
    transform:none;
  }
}