/*
Theme Name: Toro Designs Child
Template: astra
Description: Tema hijo de Astra para Toro Designs (torodesigns.com) — réplica del mockup Documentacion/mockup-sitio-web.png (paleta negro/dorado, tipografía Poppins/Inter, secciones tipo "Latin Excellence").
Version: 0.20.1
Author: bardcrack
*/
:root {
--td-black: #0a0a0a;
--td-black-soft: #131313;
--td-white: #ffffff;
--td-off-white: #f7f6f3;
--td-gold: #c9962c;
--td-gold-light: #e0b856;
--td-gold-dark: #9c7620;
--td-gray: #6b6b6b;
--td-gray-light: #d8d5cd;
--td-border: #26221a;
--td-radius: 0.6rem;
--td-radius-lg: 1rem;
--td-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35);
--font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}
/* Base */
body {
font-family: var(--font-body);
color: var(--td-black);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--td-black);
}
a {
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
/* El mockup es full-bleed de punta a punta: Astra sigue emitiendo un
max-width/padding "boxed" para .ast-container en el breakpoint de
escritorio aunque el layout del sitio esté seteado a full-width, así que
se fuerza acá para que nunca queden gutters laterales. */
.ast-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* El contenido (hero, secciones, footer) trae su propio padding lateral vía
.td-inner / .td-section, pero el header depende del padding de
.ast-container para separar el logo/menú del borde — sin él el logo
queda pegado al borde izquierdo. */
.site-header .ast-container {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
/* Astra reserva un ancho fijo (~400px, calculado para un logo mucho más
ancho) en la columna izquierda del grid del header, dejando un hueco
enorme entre el logo y el menú — se fuerza a que la columna se ajuste al
contenido real del logo y el menú tome el resto. */
.site-header .ast-builder-grid-row-has-sides {
grid-template-columns: auto 1fr !important;
}
/* El menú (flex, ancho natural) se agrupaba pegado al borde derecho dejando
un hueco enorme entre el logo y "Home" — el mockup distribuye los ítems
del menú en todo el ancho disponible (space-between) en vez de agruparlos
a la derecha. */
.site-header .main-header-bar-navigation,
.site-header .main-navigation {
width: 100%;
}
.site-header .main-header-menu {
justify-content: space-between !important;
width: 100%;
}
/* Astra vuelve a meter margin-top/bottom:60px en #primary en su media
query de escritorio (min-width:1200px), lo que deja un espacio en blanco
enorme entre el header y el hero — el mockup no tiene ese espacio. */
#primary {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* El título de página nativo de WP ("Home", "Contact", etc.) no existe en
el mockup — cada sección ya trae su propio heading. */
.page .entry-header {
display: none;
}
/* wpautop envuelve el bloque de shortcodes de la home en un vacío (el
parser cierra el
automáticamente al toparse con un , así que
queda con margin-bottom pero altura 0) — ese margen colapsa hacia afuera
y empuja todo .entry-content hacia abajo, dejando una línea blanca entre
el header y el hero que no existe en el mockup. */
.entry-content > p:first-child {
margin-top: 0;
margin-bottom: 0;
}
/* Las páginas internas (Digital Services, Photo Restoration, etc.) todavía
tienen texto plano de WP antes/después de los shortcodes de sección — sin
estilo propio salía con la tipografía por defecto de Astra, chica y
apretada. Se le da la misma familia/tamaño amigable del resto del sitio. */
.entry-content > p:not(:empty) {
max-width: 720px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.7;
color: var(--td-black);
}
@media (max-width: 600px) {
.entry-content > p:not(:empty) {
font-size: 1rem;
padding: 2rem 1.25rem;
}
}
.td-eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--td-gold);
margin-bottom: 0.6rem;
}
.td-section {
padding: 4.5rem 1.5rem;
}
.td-section--dark {
background: var(--td-black);
color: var(--td-white);
}
.td-section--dark h2, .td-section--dark h3 {
color: var(--td-white);
}
.td-section--off {
background: var(--td-off-white);
}
.td-inner {
max-width: 1200px;
margin: 0 auto;
}
.td-gold-text {
color: var(--td-gold);
}
/* Buttons */
.td-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.95rem 1.7rem;
border-radius: var(--td-radius);
border: 2px solid var(--td-gold);
text-decoration: none !important;
cursor: pointer;
white-space: nowrap;
}
.td-btn-primary {
background: var(--td-gold);
color: var(--td-black) !important;
}
.td-btn-primary:hover {
background: var(--td-gold-light);
border-color: var(--td-gold-light);
}
.td-btn-outline {
background: transparent;
color: var(--td-white) !important;
}
.td-btn-outline:hover {
background: rgba(201, 150, 44, 0.12);
}
.td-section--off .td-btn-outline,
.td-section--white .td-btn-outline {
color: var(--td-black) !important;
border-color: var(--td-black);
}
/* Menú móvil: el panel de Astra es blanco por defecto, pero los links
heredan el color blanco pensado para el header oscuro de escritorio —
quedaban invisibles (blanco sobre blanco). Se pone el panel en negro,
consistente con el resto del sitio. Astra también pinta un
background-color: var(--ast-global-color-4) (blanco) directamente sobre
el