/* componentes.css — biblioteca transversal, BEM. Sin @layer (ver base.css).
Breakpoints documentados (únicos literales de longitud permitidos fuera de
tokens: las condiciones @container/@media no aceptan var()):
28rem tarjeta de servicio pasa a horizontal · sellos del hero a 2 columnas
36rem formulario a 2 columnas · acciones del hero pasan a fila
56rem header pasa a navegación de escritorio
70rem hero pasa a 2 columnas (6/4) con sangrado derecho */
/* Skip link: oculto hasta recibir foco de teclado */
.salto-enlace {
position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 30;
background: var(--color-primary); color: var(--color-background);
font-weight: 700; text-decoration: none;
padding: var(--space-2xs) var(--space-s);
transform: translateY(-200%);
}
.salto-enlace:focus-visible { transform: none; color: var(--color-background); }
/* Botones — 5 estados: reposo, hover, :focus-visible (global), activo, deshabilitado */
.boton {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2xs); min-block-size: var(--target-min);
padding: var(--space-xs) var(--space-m);
border: 0; border-radius: var(--radius-m); cursor: pointer;
font-size: var(--text-l); font-weight: 800; text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.boton--primario, .boton--llamada { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-deep)); color: var(--color-background); }
.boton--primario:hover, .boton--llamada:hover { background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent-deep)); color: var(--color-background); }
.boton--primario:active, .boton--llamada:active { background: var(--color-accent-deep); }
.boton--llamada { font-variant-numeric: tabular-nums; }
.boton--secundario { background: transparent; color: var(--color-primary); border: var(--border-control) solid var(--color-primary); font-weight: 700; }
.boton--secundario:hover { background: var(--color-muted); color: var(--color-primary); }
.boton--secundario:active { background: var(--color-border); }
.boton--pequeno { font-size: var(--text-s); padding-inline: var(--space-s); border-radius: var(--radius-s); }
.boton:disabled, .boton[aria-disabled="true"] {
background: var(--color-muted); color: var(--color-foreground-light);
border-color: var(--color-border); cursor: not-allowed;
}
.boton[data-cargando="true"] { opacity: 0.7; cursor: progress; } /* estado carga del envío */
/* Barra de urgencia 24 h */
.urgencia {
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-deep)); color: var(--color-background);
font-size: var(--text-s); padding: var(--space-3xs) var(--space-s);
display: flex; justify-content: center; align-items: center;
gap: var(--space-xs); flex-wrap: wrap;
}
.urgencia__texto { font-weight: 700; letter-spacing: var(--tracking-meta); }
.urgencia__tel { color: var(--color-background); font-weight: 700; text-decoration: none; min-block-size: var(--target-min); display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.urgencia__tel:hover { color: var(--color-background); text-decoration: underline; }
/* Header sticky */
.cabecera { position: sticky; inset-block-start: 0; z-index: 20; background: var(--color-background); border-block-end: var(--border-hairline) solid var(--color-border); }
.cabecera__interior { max-inline-size: var(--wide-size); margin-inline: auto; padding: var(--space-2xs) var(--space-s); display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
/* El logo es un SVG con viewBox pero sin width/height: dentro de un ![]()
no
tiene tamaño intrínseco y colapsa. Se le da la medida aquí. */
.cabecera .wp-block-site-logo { line-height: 0; flex: 0 0 auto; }
.cabecera .wp-block-site-logo img,
.cabecera .custom-logo { block-size: var(--logo-alto); inline-size: auto; max-inline-size: none; display: block; }
/* WordPress fuerza `body .is-layout-flex{display:flex}` (0,1,1). Se sube la
especificidad para que el nav pueda ocultarse de verdad en móvil. */
.cabecera .cabecera__nav { display: none; align-items: center; gap: var(--space-s); margin-inline-start: auto; }
/* core/navigation separa sus ítems con --wp--style--block-gap, que este tema
fija a 0 para que Gutenberg no inyecte márgenes. Se le devuelve el gap. */
.cabecera__nav .wp-block-navigation__container { gap: var(--space-s); }
/* core/navigation pone las clases propias en el , no en el : se estiliza
el enlace real para que hover, foco y aria-current caigan donde deben. */
.cabecera__nav .wp-block-navigation-item__content,
.cabecera__enlace { color: var(--color-foreground); font-size: var(--text-s); font-weight: 600; text-decoration: none; min-block-size: var(--target-min); display: inline-flex; align-items: center; border-block-end: var(--border-accent-bar) solid transparent; }
/* Core emite `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}`
duplicando la clase para llegar a (0,3,0). Se replica la jugada, si no el
hover y la página activa no cambian nunca de color. */
.cabecera__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--color-primary); }
.cabecera__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:active { color: var(--color-primary-dark); }
.cabecera__nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] { color: var(--color-primary); border-block-end-color: var(--color-accent); }
.pie .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
.cabecera__menu-boton { display: inline-flex; align-items: center; gap: var(--space-3xs); min-block-size: var(--target-min); padding-inline: var(--space-xs); background: transparent; border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-s); font-weight: 700; font-size: var(--text-s); cursor: pointer; }
.cabecera__menu-boton:hover { border-color: var(--color-primary); color: var(--color-primary); }
@media (min-width: 56rem) {
.cabecera .cabecera__nav { display: flex; }
.cabecera__menu-boton { display: none; }
}
/* Menú móvil: