/*
Theme Name: Formaletas & Equipos
Theme URI: https://formaletasyequipos.com
Author: Formaletas & Equipos LTDA
Author URI: https://formaletasyequipos.com
Description: Tema corporativo de una sola pagina para Formaletas & Equipos LTDA (Cucuta, Colombia). Hero, contadores animados, catalogo de equipos, obras, formulario de contacto y boton flotante de WhatsApp. Totalmente responsive (celular, tablet, portatil y escritorio).
Version: 1.3.1
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: formaletas-equipos
*/

/* ==========================================================================
   Formaletas & Equipos LTDA — Sitio corporativo (versión autónoma)
   HTML + CSS + JS puro · sin dependencias · listo para WordPress
   Tokens tomados del design system original.
   ========================================================================== */

/* ---- Tokens de color / marca ---- */
:root{
  --red-500:#FF3131; --red-600:#E62B2B; --red-700:#CC2525; --red-50:#FFF1F1; --red-100:#FFE0E0;
  --black:#222222; --white:#FEFEFE;
  --gray-50:#FAFAFA; --gray-100:#F5F5F5; --gray-200:#E5E5E5; --gray-300:#D4D4D4; --gray-400:#A3A3A3;
  --gray-500:#737373; --gray-600:#525252; --gray-700:#404040; --gray-800:#262626; --gray-900:#171717;

  --color-primary:var(--red-500); --color-primary-hover:var(--red-600); --color-primary-active:var(--red-700);

  --text-strong:var(--gray-900); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --surface-page:var(--gray-50); --surface-card:var(--white);
  --border-subtle:var(--gray-200); --border-default:var(--gray-300); --border-focus:var(--red-500);

  --font-heading:'Montserrat','Arial',sans-serif;
  --font-body:'Inter','Arial',sans-serif;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --shadow-card:0 2px 8px rgba(0,0,0,.08); --shadow-dropdown:0 4px 16px rgba(0,0,0,.10);
  --focus-ring:0 0 0 3px rgba(255,49,49,.28);

  --ease:cubic-bezier(.22,1,.36,1);
  --duration-fast:120ms; --duration-base:180ms;

  --container:1200px;
  --pad-x:32px;               /* padding lateral del contenedor (se reduce en móvil) */
  --nav-h:72px;
}

/* ---- Reset mínimo ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.5;
  color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-heading); color:var(--text-strong); line-height:1.15; letter-spacing:-.02em; margin:0;}
img{max-width:100%;}
a{color:inherit; text-decoration:none;}

.container{max-width:var(--container); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x);}
.eyebrow{font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--red-600);}
.section-pad{padding-top:88px; padding-bottom:88px;}

/* ---- Botones (equivalente al componente Button del DS) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; white-space:nowrap; text-align:center;
  transition:background var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease),
             transform var(--duration-base) var(--ease), color var(--duration-fast);
  will-change:transform;
}
/* Se levanta sutilmente al pasar el mouse y baja al soltar */
.btn:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.14);}
.btn:active{transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.12); transition-duration:var(--duration-fast);}
.btn svg{width:1.1em; height:1.1em; flex:none;}
.btn-sm{height:40px; padding:0 16px; font-size:14px;}
.btn-md{height:48px; padding:0 20px; font-size:15px;}
.btn-lg{height:56px; padding:0 28px; font-size:16px;}
.btn-primary{background:var(--color-primary); color:var(--white);}
.btn-primary:hover{background:var(--color-primary-hover);}
.btn-primary:active{background:var(--color-primary-active);}
.btn-outline{background:transparent; color:var(--color-primary); border-color:var(--color-primary);}
.btn-outline:hover{background:var(--red-50);}
.btn-ghost-dark{background:transparent; color:#fff; border:1px solid var(--gray-700);}
.btn-ghost-dark:hover{background:rgba(255,255,255,.14);}
.btn-block{width:100%;}

/* ---- Badge ---- */
.badge{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--radius-full);
  background:var(--red-50); color:var(--red-700); font-size:12px; font-weight:600; line-height:1;}
.badge .dot{width:6px; height:6px; border-radius:50%; background:var(--red-500);}

/* ---- Header / navbar inteligente ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(254,254,254,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);
  transition:box-shadow .35s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.07);}
/* Compensa la barra de administración de WordPress (solo visible cuando tu
   sesión está iniciada) para que el header fijo no quede tapado al hacer scroll. */
.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){ .admin-bar .site-header{top:46px;} }
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h);}
.brand{font-family:var(--font-heading); font-weight:800; font-size:18px; color:var(--black); line-height:1;}
.brand span{color:var(--red-500);}
.nav-links{display:flex; gap:32px; align-items:center;}
.nav-links a.nav-link{font-size:14px; font-weight:500; color:var(--text-body); transition:color var(--duration-fast);}
.nav-links a.nav-link:hover{color:var(--red-600);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--black);}
.nav-toggle svg{width:26px; height:26px;}
.mobile-menu{display:none;}

/* ---- Hero ---- */
.hero{background:var(--black); color:#fff; position:relative; overflow:hidden;}
.hero .container{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-top:88px; padding-bottom:104px;}
.hero h1{font-size:clamp(34px,5vw,50px); font-weight:800; color:#fff; line-height:1.05; margin:0;}
.hero h1 .accent{color:var(--red-500);}
.hero p{font-size:clamp(16px,2.2vw,18px); color:var(--gray-300); line-height:1.6; margin-top:22px; max-width:460px;}
.hero-actions{display:flex; gap:12px; margin-top:36px; flex-wrap:wrap;}
.hero-media{position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.45); border:1px solid var(--gray-800);}
.hero-media img{display:block; width:100%; height:480px; object-fit:cover;}
.hero-media .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(34,34,34,0) 55%,rgba(34,34,34,.55) 100%);}
.hero-media .caption{position:absolute; left:20px; bottom:18px; display:flex; align-items:center; gap:8px; color:#fff; font-size:13px; font-weight:600; letter-spacing:.02em;}
.hero-media .caption .dot{width:8px; height:8px; border-radius:50%; background:var(--red-500);}
.truss{position:absolute; bottom:0; left:0; right:0; height:60px; opacity:.16; z-index:1;}

/* ---- Franja de estadísticas (contadores) ---- */
.stats{background:var(--red-500);}
.stats .container{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:34px; padding-bottom:34px;}
.stat{color:#fff; text-align:center;}
.stat .num{font-family:var(--font-heading); font-weight:800; font-size:clamp(28px,4vw,34px); line-height:1;}
.stat .lbl{font-size:14px; opacity:.9; margin-top:6px;}

/* ---- Encabezado de sección ---- */
.section-head{max-width:640px;}
.section-head.center{margin:0 auto 48px; text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,40px); font-weight:700; margin-top:12px;}
.section-head p{font-size:17px; color:var(--text-muted); line-height:1.6; margin-top:14px;}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:40px;}

/* ---- Card (equivalente al componente Card) ---- */
.card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base);}
.card.interactive:hover{box-shadow:var(--shadow-dropdown); transform:translateY(-2px);}

/* Servicios */
.grid-servicios{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.servicio{display:flex; flex-direction:column; gap:14px; padding:24px;}
.servicio .ico{width:48px; height:48px; border-radius:var(--radius-md); background:var(--red-50); color:var(--red-600); display:inline-flex; align-items:center; justify-content:center;}
.servicio .ico svg{width:24px; height:24px;}
.servicio h3{font-size:18px; font-weight:700;}
.servicio p{font-size:14px; color:var(--text-muted); line-height:1.6; margin:0;}

/* Equipos */
.equipos{background:var(--gray-50); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);}
.grid-equipos{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.eq-card{overflow:hidden;}
.eq-card .thumb{height:180px; overflow:hidden;}
.eq-card .thumb img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); will-change:transform;}
.eq-card:hover .thumb img{transform:scale(1.05);}
.eq-card .meta{padding:20px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.eq-card .meta span{font-family:var(--font-heading); font-weight:700; font-size:16px; color:var(--text-strong);}
.eq-card .meta svg{width:18px; height:18px; color:var(--gray-400); flex:none;}

/* Obras (mosaico) */
.grid-obras{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:200px 200px; gap:16px;}
.obra{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-subtle);}
.obra:first-child{grid-column:span 1; grid-row:span 2;}
.obra img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); will-change:transform;}
.obra:hover img{transform:scale(1.05);}
.obra .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(34,34,34,0) 45%,rgba(34,34,34,.78) 100%);}
.obra .cap{position:absolute; left:18px; right:18px; bottom:16px; color:#fff;}
.obra .cap .t{font-family:var(--font-heading); font-weight:700; font-size:15px;}
.obra:first-child .cap .t{font-size:20px;}
.obra .cap .d{font-size:12.5px; color:var(--gray-300); margin-top:3px;}

/* CTA */
.cta{background:var(--black); border-radius:var(--radius-xl); padding:64px 56px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.cta h2{color:#fff; font-size:clamp(26px,3.6vw,36px); font-weight:700; margin:0;}
.cta p{color:var(--gray-300); font-size:17px; margin-top:14px; line-height:1.6;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* Contacto */
.contacto{background:var(--surface-card); border-top:1px solid var(--border-subtle);}
.contact-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:start;}
.contact-info{display:flex; flex-direction:column; gap:26px;}
.info-row{display:flex; gap:16px;}
.info-row .ico{width:44px; height:44px; flex:none; border-radius:var(--radius-md); background:var(--red-50); display:inline-flex; align-items:center; justify-content:center;}
.info-row .ico svg{width:20px; height:20px; color:var(--red-600);}
.info-row .a{font-weight:600; font-size:15px; color:var(--text-strong);}
.info-row .b{font-size:13.5px; color:var(--text-muted); margin-top:3px;}
.contact-card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-card); padding:32px;}
form.cotiza{display:flex; flex-direction:column; gap:18px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13px; font-weight:600; color:var(--text-strong);}
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:15px; color:var(--text-strong); background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-sm); outline:none;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field input,.field select{height:48px; padding:0 14px;}
.field textarea{padding:12px 14px; resize:vertical; min-height:110px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--border-focus); box-shadow:var(--focus-ring);}
.form-note{font-size:12.5px; color:var(--text-muted); text-align:center; margin:0;}
.form-sent{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:48px 12px;}
.form-sent .check{width:56px; height:56px; border-radius:50%; background:var(--red-50); display:inline-flex; align-items:center; justify-content:center;}
.form-sent .check svg{width:26px; height:26px; color:var(--red-600);}
.form-sent h3{font-size:20px; font-weight:700;}
.form-sent p{font-size:14.5px; color:var(--text-muted); max-width:340px; line-height:1.6; margin:0;}

/* ---- Aviso mientras WPForms no está configurado ---- */
.fye-form-setup{display:flex; flex-direction:column; gap:8px; padding:24px; border:1px dashed var(--border-default);
  border-radius:var(--radius-md); background:var(--gray-50); color:var(--text-muted); font-size:14px; line-height:1.6;}
.fye-form-setup strong{color:var(--text-strong); font-size:15px;}
.fye-form-setup code{font-family:var(--font-mono,monospace); font-size:12.5px; background:var(--gray-100); padding:1px 6px; border-radius:6px; color:var(--red-700);}

/* ============================================================
   WPForms — se adapta al diseño del sitio (botón rojo, campos
   redondeados, foco con anillo). Todo dentro de .contact-card.
   ============================================================ */
.contact-card .wpforms-container{margin:0;}
/* Layout DETERMINISTA con flexbox: anula los floats de WPForms (que causaban
   solapamiento de campos) y fija el espaciado uniforme del diseño. */
.contact-card .wpforms-form{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;}
.contact-card .wpforms-field-container{display:flex; flex-wrap:wrap; gap:18px; width:100%;}
.contact-card .wpforms-field{
  float:none !important; clear:none !important;
  width:100% !important; margin:0 !important; padding:0 !important;
}
.contact-card .wpforms-submit-container{width:100% !important; margin:0 !important;}
/* Dos columnas cuando el campo lleva la clase wpforms-one-half (en escritorio) */
@media (min-width:561px){
  .contact-card .wpforms-field.wpforms-one-half{width:calc(50% - 9px) !important;}
}
.contact-card .wpforms-field-label{
  font-family:var(--font-body); font-size:13px !important; font-weight:600 !important;
  color:var(--text-strong) !important; margin:0 0 6px !important; line-height:1.3;
}
.contact-card .wpforms-required-label{color:var(--red-600);}
/* Campos de texto, email, tel, número, select y textarea */
.contact-card .wpforms-field input[type=text],
.contact-card .wpforms-field input[type=email],
.contact-card .wpforms-field input[type=tel],
.contact-card .wpforms-field input[type=url],
.contact-card .wpforms-field input[type=number],
.contact-card .wpforms-field select,
.contact-card .wpforms-field textarea{
  width:100% !important; max-width:100% !important;
  font-family:var(--font-body) !important; font-size:15px !important; color:var(--text-strong) !important;
  background:var(--surface-card) !important; border:1px solid var(--border-default) !important;
  border-radius:var(--radius-sm) !important; box-shadow:none !important;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast) !important;
}
.contact-card .wpforms-field input[type=text],
.contact-card .wpforms-field input[type=email],
.contact-card .wpforms-field input[type=tel],
.contact-card .wpforms-field input[type=url],
.contact-card .wpforms-field input[type=number],
.contact-card .wpforms-field select{height:48px !important; padding:0 14px !important;}
.contact-card .wpforms-field textarea{min-height:110px !important; padding:12px 14px !important; resize:vertical;}
.contact-card .wpforms-field input:focus,
.contact-card .wpforms-field select:focus,
.contact-card .wpforms-field textarea:focus{
  border-color:var(--border-focus) !important; box-shadow:var(--focus-ring) !important; outline:none !important;
}
/* Descripciones y notas de campo */
.contact-card .wpforms-field-description{font-size:12.5px !important; color:var(--text-muted) !important; margin-top:6px !important;}
/* Botón de envío = botón primario del sitio, con el mismo efecto de elevación */
.contact-card .wpforms-submit-container{margin-top:2px;}
.contact-card button.wpforms-submit{
  display:inline-flex; align-items:center; justify-content:center; width:100% !important;
  height:56px !important; padding:0 28px !important;
  font-family:var(--font-body) !important; font-size:16px !important; font-weight:600 !important;
  color:var(--white) !important; background:var(--color-primary) !important;
  border:1px solid transparent !important; border-radius:var(--radius-sm) !important; cursor:pointer;
  transition:background var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease),
             transform var(--duration-base) var(--ease) !important;
}
.contact-card button.wpforms-submit:hover{
  background:var(--color-primary-hover) !important; transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.contact-card button.wpforms-submit:active{transform:translateY(-1px);}
/* Mensajes de error / confirmación */
.contact-card .wpforms-error{color:var(--danger) !important; font-size:12.5px !important;}
.contact-card .wpforms-field input.wpforms-error,
.contact-card .wpforms-field select.wpforms-error,
.contact-card .wpforms-field textarea.wpforms-error{border-color:var(--danger) !important;}
.contact-card .wpforms-confirmation-container-full{
  background:var(--red-50) !important; border:1px solid var(--red-100) !important; color:var(--text-strong) !important;
  border-radius:var(--radius-md) !important; padding:20px !important; font-size:14.5px !important;
}
/* En celular, cada campo ocupa el ancho completo (una sola columna) */
@media (max-width:560px){
  .contact-card .wpforms-field.wpforms-one-half{width:100% !important;}
}

/* Footer */
.site-footer{background:var(--black); color:var(--gray-400);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-top:56px; padding-bottom:56px;}
.footer-grid .brand{color:#fff;}
.footer-grid .brand span{color:var(--red-500);}
.footer-col h4{color:#fff; font-weight:600; font-size:14px; margin-bottom:14px;}
.footer-col a,.footer-col div.li{display:block; font-size:13px; margin-bottom:8px; color:var(--gray-400);}
.footer-col a:hover{color:#fff;}
.footer-about p{font-size:13px; line-height:1.6; margin-top:14px; max-width:280px;}
.footer-about .hours{font-size:13px; margin-top:16px;}
.footer-bottom{border-top:1px solid var(--gray-800); padding:20px var(--pad-x); text-align:center; font-size:12px;}

/* ---- Botón flotante de WhatsApp ---- */
.wa-float{position:fixed; right:20px; bottom:20px; z-index:60; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform var(--duration-base) var(--ease); cursor:pointer;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px; height:30px;}

/* ======================= ANIMACIONES ======================= */
/* Salvaguarda: sin JavaScript el contenido se ve normal (nunca queda invisible). */
.reveal{opacity:1;}
/* Aparición suave al hacer scroll (fade-up) — solo cuando hay JS */
.js .reveal{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform;}
.js .reveal.is-visible{opacity:1; transform:none;}

/* Entrada del hero al cargar la página (para que no se sienta estático de entrada) */
.js .hero .reveal{opacity:0; transform:translateY(34px);}
.js .hero.loaded .reveal{opacity:1; transform:none;}

/* Zoom lento y sutil de la imagen del hero al cargar (vida, sin exagerar) */
.js .hero-media img{transform:scale(1.08); transition:transform 1.6s var(--ease);}
.js .hero.loaded .hero-media img{transform:scale(1);}

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

/* Portátiles / desktop pequeño */
@media (max-width:1024px){
  :root{--pad-x:24px;}
  .hero .container{grid-template-columns:1fr; gap:40px; padding-top:64px; padding-bottom:72px;}
  .hero-media img{height:400px;}
  .contact-grid{grid-template-columns:1fr; gap:36px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .grid-servicios{grid-template-columns:repeat(2,1fr);}
}

/* Tablets */
@media (max-width:768px){
  .section-pad{padding-top:64px; padding-bottom:64px;}
  /* Menú móvil */
  .nav-links{display:none;}
  .nav-toggle{display:inline-flex;}
  .mobile-menu{display:block; overflow:hidden; max-height:0; transition:max-height .35s var(--ease);
    background:rgba(254,254,254,.98); border-top:1px solid var(--border-subtle);}
  .mobile-menu.open{max-height:360px;}
  .mobile-menu .mm-inner{display:flex; flex-direction:column; padding:12px var(--pad-x) 20px;}
  .mobile-menu a{padding:12px 0; font-size:15px; font-weight:500; color:var(--text-body); border-bottom:1px solid var(--border-subtle);}
  .mobile-menu .btn{margin-top:14px;}

  .stats .container{grid-template-columns:repeat(2,1fr); gap:28px 16px;}
  .grid-equipos{grid-template-columns:repeat(2,1fr);}
  /* Mosaico de obras -> 2 columnas simples */
  .grid-obras{grid-template-columns:1fr 1fr; grid-template-rows:none; gap:14px;}
  .obra{height:200px;}
  .obra:first-child{grid-column:span 2; grid-row:auto; height:240px;}
  .cta{padding:44px 32px;}
}

/* Celulares */
@media (max-width:560px){
  :root{--pad-x:18px;}
  .section-pad{padding-top:52px; padding-bottom:52px;}
  .hero .container{padding-top:52px; padding-bottom:56px;}
  .hero-media img{height:300px;}
  .hero-actions .btn{flex:1 1 auto;}
  .grid-servicios{grid-template-columns:1fr;}
  .grid-equipos{grid-template-columns:1fr;}
  .grid-obras{grid-template-columns:1fr;}
  .obra,.obra:first-child{grid-column:auto; height:200px;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .cta{padding:36px 24px;}
  .cta-actions{width:100%;}
  .cta-actions .btn{flex:1 1 auto;}
  .head-row{align-items:flex-start;}
}

/* Respeto por usuarios que prefieren menos movimiento:
   se elimina el desplazamiento y el zoom, pero se conserva un fundido suave
   para que el sitio no se sienta completamente estático. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal,.js .hero .reveal{transform:none; transition:opacity .6s ease;}
  .js .reveal.is-visible,.js .hero.loaded .reveal{transform:none;}
  .js .hero-media img,.js .hero.loaded .hero-media img{transform:none; transition:none;}
  .eq-card .thumb img,.obra img{transition:none;}
  .eq-card:hover .thumb img,.obra:hover img{transform:none;}
}