html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
*, *::before, *::after {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
dt { font-weight: bold; }
dd { margin-left: 20px; }
address, cite, var { font-style: italic; }
ins { text-decoration: underline; }
del, s, strike { text-decoration: line-through; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
small, sup, sub { font-size: 80%; }
button { outline: 0; }
a[href^="tel"] { color: inherit; text-decoration: none; }
textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"],
input[type="button"], input[type="submit"], input[type="reset"] {
appearance: none;
-webkit-appearance: none;
border-radius: 0;
}
input[type="search"] { appearance: textfield; -webkit-appearance: textfield; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.gallery-caption { font-size: 0.85rem; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
:root {
--verde: #00a64b;
--verde-oscuro: #06752e;
--verde-claro: #e8f5ef;
--titular: #14261c;
--texto: #898a8d;
--fondo: #f4f6f4;
--blanco: #ffffff;
--azul: #97c9eb;
--whatsapp: #25d366;
--radio: 16px;
--radio-lg: 24px;
--sombra: 0 4px 24px rgba(0, 0, 0, 0.06);
--sombra-hover: 0 8px 40px rgba(0, 166, 75, 0.12);
--transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--borde: rgba(0, 0, 0, 0.04);
--borde-fuerte: rgba(0, 0, 0, 0.08);
}
body {
font-family: 'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--texto);
background-color: var(--blanco);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: inherit;
color: var(--titular);
font-weight: 700;
line-height: 1.2;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
strong, b { font-weight: 700; }
em, i { font-style: italic; }
::selection {
background: var(--verde);
color: var(--blanco);
}
:focus-visible {
outline: 2px solid var(--verde);
outline-offset: 2px;
border-radius: 4px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.container--ancho {
max-width: 1300px;
padding: 0 40px;
}
#envoltorio {
overflow-x: hidden;
}
#contenido {
min-height: 50vh;
}
#contenido:focus { outline: none; }
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed !important;
top: 12px;
left: 12px;
z-index: 10000;
width: auto;
height: auto;
padding: 12px 20px;
clip: auto;
background: var(--verde);
color: var(--blanco);
border-radius: 8px;
}
.migas {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
}
.migas a { transition: var(--transicion); }
.migas a:hover { color: var(--verde); }
.migas svg { opacity: 0.35; flex-shrink: 0; }
.migas > span {
color: var(--titular);
font-weight: 600;
}
.wa-flotante {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 900;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px;
color: var(--blanco);
background: var(--whatsapp);
border-radius: 999px;
box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
transition: var(--transicion);
}
.wa-flotante:hover,
.wa-flotante:focus-visible {
background: #1da851;
box-shadow: 0 10px 32px rgba(37, 211, 102, 0.45);
transform: translateY(-2px);
}
.wa-flotante svg {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.wa-flotante__rotulo {
padding-right: 6px;
font-size: 15px;
font-weight: 700;
line-height: 1;
}
@media (max-width: 600px) {
.wa-flotante {
right: 14px;
bottom: 14px;
}
.wa-flotante__rotulo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.wa-flotante:hover,
.wa-flotante:focus-visible { transform: none; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 32px;
border: none;
border-radius: 50px;
font: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
transition: var(--transicion);
}
.btn--primario {
background: var(--verde);
color: var(--blanco);
box-shadow: 0 4px 15px rgba(0, 166, 75, 0.3);
}
.btn--primario:hover {
background: var(--verde-oscuro);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 166, 75, 0.4);
}
.btn--invertido {
background: var(--verde);
color: var(--blanco);
padding: 16px 40px;
letter-spacing: 1px;
box-shadow: 0 8px 30px rgba(0, 166, 75, 0.35);
}
.btn--invertido:hover {
background: var(--blanco);
color: var(--verde);
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(255, 255, 255, 0.2);
}
.btn--secundario {
background: rgba(255, 255, 255, 0.08);
color: var(--blanco);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn--secundario:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
}
.btn--suave {
background: var(--verde-claro);
color: var(--verde);
border-radius: 14px;
box-shadow: none;
}
.btn--suave:hover {
background: var(--verde);
color: var(--blanco);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 166, 75, 0.25);
}
.btn--whatsapp {
background: var(--whatsapp);
color: var(--blanco);
text-transform: none;
letter-spacing: 0;
font-size: 15px;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}
.btn--whatsapp:hover {
background: #1fba59;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}
.btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.titulo-seccion {
position: relative;
display: inline-block;
padding-bottom: 20px;
font-size: 38px;
font-weight: 800;
color: var(--titular);
letter-spacing: -0.02em;
line-height: 1.15;
}
.titulo-seccion::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--verde);
border-radius: 2px;
}
.titulo-seccion--izq::after {
left: 0;
transform: none;
}
.titulo-seccion--azul::after {
background: linear-gradient(90deg, var(--azul), #6ba8d6);
}
.centrado { text-align: center; }
.cabecera {
position: sticky;
top: 0;
z-index: 999;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: box-shadow 0.3s ease;
}
.cabecera.esta-desplazada {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}
.cabecera__barra {
background: var(--verde);
color: var(--blanco);
font-size: 13px;
}
.cabecera__barra-interior {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 20px;
min-height: 36px;
padding-top: 4px;
padding-bottom: 4px;
}
.cabecera__telefono {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
letter-spacing: 0.2px;
transition: var(--transicion);
}
.cabecera__telefono:hover { opacity: 0.8; }
.cabecera__telefono svg {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.9;
}
.cabecera__barra-interior > :only-child {
margin: 0 auto;
}
.cabecera__interior {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 70px;
}
.cabecera__logo img {
display: block;
max-height: 50px;
width: auto;
}
.cabecera__logo-texto {
font-size: 22px;
font-weight: 700;
color: var(--titular);
}
.menu__lista {
display: flex;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.menu__lista li {
position: relative;
}
.menu__lista a {
display: block;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--titular);
transition: var(--transicion);
}
.menu__lista a:hover,
.menu__lista .current-menu-item > a,
.menu__lista .current_page_item > a,
.menu__lista .current-menu-ancestor > a {
color: var(--verde);
background: var(--verde-claro);
}
.menu__lista .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
flex-direction: column;
min-width: 240px;
padding: 8px;
list-style: none;
background: var(--blanco);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radio);
box-shadow: var(--sombra);
animation: aparecerAbajo 0.3s ease;
}
.menu__lista li:hover > .sub-menu,
.menu__lista li:focus-within > .sub-menu {
display: flex;
}
.menu__lista .sub-menu a {
font-size: 13px;
padding: 8px 12px;
white-space: nowrap;
}
@keyframes aparecerAbajo {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: translateY(0); }
}
.redes {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.redes a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transicion);
}
.redes svg {
width: 15px;
height: 15px;
}
.redes--barra a {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.16);
color: var(--blanco);
}
.redes--barra a:hover {
background: var(--blanco);
color: var(--verde);
transform: translateY(-2px);
}
.redes--pie {
gap: 10px;
margin-top: 24px;
}
.redes--pie a {
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
}
.redes--pie a:hover {
background: var(--verde);
border-color: var(--verde);
color: var(--blanco);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 166, 75, 0.25);
}
.redes--pie svg {
width: 18px;
height: 18px;
}
.menu-boton {
display: none;
padding: 8px;
background: none;
border: none;
cursor: pointer;
}
.menu-boton span {
display: block;
width: 24px;
height: 2px;
margin: 5px 0;
background: var(--titular);
transition: var(--transicion);
}
.menu-boton.esta-abierto span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-boton.esta-abierto span:nth-child(2) { opacity: 0; }
.menu-boton.esta-abierto span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
@media (max-width: 921px) {
.menu-boton { display: block; }
.menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 16px;
background: var(--blanco);
border-radius: 0 0 var(--radio) var(--radio);
box-shadow: var(--sombra);
}
.menu.esta-abierto { display: block; }
.menu__lista { flex-direction: column; }
.menu__lista .sub-menu {
position: static;
padding-left: 16px;
border: none;
box-shadow: none;
animation: none;
}
}
.pie {
position: relative;
overflow: hidden;
background: var(--titular);
color: rgba(255, 255, 255, 0.7);
}
.pie::before {
content: "";
position: absolute;
top: -150px;
right: -100px;
width: 400px;
height: 400px;
background: var(--verde);
opacity: 0.03;
border-radius: 50%;
pointer-events: none;
}
.pie__interior {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.pie__columnas {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 60px;
padding: 70px 0 50px;
}
.pie__marca { padding-right: 20px; }
.pie__logo img {
max-height: 45px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.95;
transition: var(--transicion);
}
.pie__logo:hover img { opacity: 1; }
.pie__descripcion {
margin: 20px 0 28px;
font-size: 14px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.6);
}
.pie__whatsapp {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
border: 1px solid rgba(37, 211, 102, 0.25);
border-radius: 50px;
background: rgba(37, 211, 102, 0.12);
color: var(--whatsapp);
font-size: 14px;
transition: var(--transicion);
}
.pie__whatsapp:hover {
background: var(--whatsapp);
border-color: var(--whatsapp);
color: var(--blanco);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.pie__whatsapp svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.pie__columna h3 {
position: relative;
margin-bottom: 24px;
padding-bottom: 14px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--blanco);
}
.pie__columna h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background: var(--verde);
border-radius: 2px;
}
.pie__enlaces {
list-style: none;
margin: 0;
padding: 0;
}
.pie__enlaces li { margin-bottom: 12px; }
.pie__enlaces a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
transition: var(--transicion);
}
.pie__enlaces a::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--verde);
border-bottom: 1.5px solid var(--verde);
transform: rotate(-45deg);
transition: var(--transicion);
flex-shrink: 0;
}
.pie__enlaces a:hover {
color: var(--blanco);
padding-left: 4px;
}
.pie__enlaces a:hover::before { border-color: var(--blanco); }
.pie__legal {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pie__legal .pie__interior {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.pie__legal p {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 768px) {
.pie__columnas {
grid-template-columns: 1fr;
gap: 40px;
padding: 50px 0 30px;
}
.pie__marca,
.pie__columna {
padding-right: 0;
text-align: center;
}
.pie__columna h3::after {
left: 50%;
transform: translateX(-50%);
}
.pie__enlaces a { justify-content: center; }
.pie__whatsapp { justify-content: center; }
.redes--pie { justify-content: center; }
}
.tarjeta {
position: relative;
display: flex;
flex-direction: column;
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: var(--radio-lg);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: var(--transicion);
}
.tarjeta::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: 2;
height: 4px;
background: linear-gradient(90deg, var(--verde), var(--azul));
opacity: 0;
transition: var(--transicion);
}
.tarjeta:hover {
transform: translateY(-10px);
border-color: rgba(0, 166, 75, 0.18);
box-shadow: 0 24px 60px rgba(0, 166, 75, 0.14);
}
.tarjeta:hover::before { opacity: 1; }
.tarjeta__imagen {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
padding: 24px;
background: var(--fondo);
overflow: hidden;
}
.tarjeta__imagen img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tarjeta:hover .tarjeta__imagen img { transform: scale(1.06); }
.tarjeta__cuerpo {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
}
.tarjeta__titulo {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
color: var(--titular);
}
.tarjeta__resumen {
flex: 1;
margin: 0 0 16px;
font-size: 13px;
line-height: 1.6;
}
.tarjeta__enlace {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--verde);
transition: gap 0.3s ease;
}
.tarjeta:hover .tarjeta__enlace { gap: 10px; }
.tarjeta--simple .tarjeta__titulo { flex: 1; }
.tarjeta__boton {
display: block;
margin-top: auto;
padding: 14px 20px;
text-align: center;
}
@media (max-width: 640px) {
.tarjeta--detalle { flex-direction: row; }
.tarjeta--detalle .tarjeta__imagen {
flex-shrink: 0;
width: 140px;
min-height: 140px;
aspect-ratio: auto;
padding: 16px;
}
.tarjeta--detalle .tarjeta__cuerpo { padding: 16px; }
}
@media (max-width: 480px) {
.tarjeta__titulo { font-size: 13px; }
.tarjeta__boton {
padding: 12px 14px;
font-size: 11px;
}
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 14px 18px;
border: 1px solid var(--borde-fuerte);
border-radius: 12px;
background: var(--fondo);
font: inherit;
font-size: 14px;
color: var(--titular);
transition: var(--transicion);
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--verde);
background: var(--blanco);
box-shadow: 0 0 0 3px rgba(0, 166, 75, 0.1);
outline: none;
}
textarea {
min-height: 120px;
resize: vertical;
}
[data-anima].esta-oculto {
opacity: 0;
transform: translateY(30px);
}
[data-anima] {
opacity: 1;
transform: none;
transition: opacity 0.6s ease var(--retardo, 0s), transform 0.6s ease var(--retardo, 0s);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
[data-anima],
[data-anima].esta-oculto {
opacity: 1;
transform: none;
transition: none;
}
html { scroll-behavior: auto; }
}