:root {
--color-primary: #f25c05;
--color-secondary: #aef27e;
--color-accent: #0e5921;
--color-accent-light: #aef27e;
--color-neutral: #f2f2f2;
--color-white: #ffffff;
--color-dark: #1a1a1a;
--color-gray: #666666;
--color-light-gray: #e0e0e0;
--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
--border-radius: 8px;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
color: var(--color-dark);
line-height: 1.6;
background-color: var(--color-white);
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
margin-bottom: 1rem;
color: var(--color-primary);
}
h1 {
font-size: 2.5rem;
font-weight: 700;
}
h2 {
font-size: 2rem;
font-weight: 600;
}
h3 {
font-size: 1.5rem;
font-weight: 600;
}
h4 {
font-size: 1.25rem;
font-weight: 500;
}
p {
margin-bottom: 1rem;
color: var(--color-gray);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--color-accent);
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
gap: 2rem;
}
.section {
padding: 2.1rem 0;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--color-dark);
position: relative;
}
.section-title::after {
content: "";
display: block;
width: 80px;
height: 4px;
background: var(--color-primary);
margin: 0.75rem auto 0;
border-radius: 2px;
}
.btn {
display: inline-block;
padding: 14px 28px;
border: none;
border-radius: calc(var(--border-radius) + 2px);
font-weight: 700;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: var(--transition);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.6px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
outline: none;
}
.btn:focus {
outline: none;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.btn:active {
transform: translateY(1px);
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-accent);
color: var(--color-white);
transform: translateY(-2px) scale(1.01);
box-shadow: var(--shadow-hover);
}
.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-primary);
}
.btn-secondary:hover {
background-color: var(--color-accent-light);
color: var(--color-white);
}
.btn-outline {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Portal Web Button - Opción Premium */
.btn-portal {
background: var(--color-primary);
color: var(--color-white);
border: none;
padding: 14px 32px;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.8px;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(242, 92, 5, 0.25);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
position: relative;
outline: none;
box-sizing: border-box;
text-decoration: none;
}
.btn-portal:focus,
.btn-portal:focus-visible,
.btn-portal:visited {
outline: none !important;
color: var(--color-white);
text-decoration: none;
box-shadow: 0 4px 15px rgba(242, 92, 5, 0.25);
}
.btn-portal-icon {
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.btn-portal:hover {
background: var(--color-accent);
border-color: var(--color-accent);
box-shadow: 0 8px 25px rgba(14, 89, 33, 0.35);
transform: translateY(-2px);
color: var(--color-white);
}
.btn-portal:hover .btn-portal-icon {
transform: scale(1.15);
}
.btn-portal:active {
transform: translateY(0);
}
/* Alternativa: Botón Invertido (outline) */
.btn-portal-outline {
background: transparent;
color: var(--color-primary);
border: 2.5px solid var(--color-primary);
padding: 14px 32px;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.8px;
border-radius: 50px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
outline: none;
}
.btn-portal-outline:focus {
outline: none;
}
.btn-portal-outline:hover {
background: var(--color-primary);
color: var(--color-white);
box-shadow: 0 8px 25px rgba(242, 92, 5, 0.3);
transform: translateY(-2px);
}
/* Alternativa: Botón Minimalista */
.btn-portal-minimal {
background: transparent;
color: var(--color-primary);
border: none;
padding: 14px 28px;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.8px;
border-bottom: 3px solid var(--color-primary);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
position: relative;
outline: none;
}
.btn-portal-minimal:focus {
outline: none;
}
.btn-portal-minimal:hover {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
transform: translateY(-2px);
}
.grid {
display: grid;
gap: 2rem;
margin-top: 0.75rem; /* separa la rejilla del contenido anterior */
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.card {
background: var(--color-white);
border-radius: calc(var(--border-radius) + 4px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
padding: 2.25rem;
transition: var(--transition);
margin-bottom: 1.5rem;
position: relative;
z-index: 0;
border-left: 4px solid rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 30%);
}
.card h3,
.card h4 {
color: var(--color-dark);
font-weight: 700;
}
/* Document / CCU card specific styles */
.document-header {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.document-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(
135deg,
var(--color-primary),
rgba(14, 89, 33, 0.08)
);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--color-white);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.document-info h3 {
margin: 0 0 0.25rem 0;
font-size: 1.25rem;
}
.document-description {
color: var(--color-gray);
margin: 0;
font-size: 0.95rem;
}
.info-item {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.6rem;
}
.info-item strong {
color: var(--color-dark);
min-width: 150px;
display: inline-block;
font-weight: 700;
}
.services-authorized {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px dashed rgba(0, 0, 0, 0.05);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
margin-top: 0.75rem;
}
.service-item {
display: flex;
gap: 0.6rem;
align-items: center;
padding: 0.5rem 0.6rem;
background: rgba(0, 0, 0, 0.02);
border-radius: 8px;
font-size: 0.95rem;
}
.service-check {
font-size: 1rem;
}
/* Formal document action area */
.documents-actions {
display: flex;
flex-wrap: nowrap;
gap: 1.25rem;
align-items: flex-start;
justify-content: flex-start;
margin-top: 1rem;
}
/* Ensure the action group grows and the note stays at the far right */
.documents-actions .action-group {
flex: 1 1 auto;
max-width: none;
}
.documents-actions .action-group h4 {
font-size: 1rem;
margin: 0 0 0.5rem 0;
font-weight: 600;
color: var(--color-dark);
text-transform: none;
}
.documents-actions .btn-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
/* Base card style for documents */
.documents-actions .doc-card {
min-width: 220px;
text-align: left;
display: inline-flex;
align-items: flex-start;
gap: 0.875rem;
padding: 14px 16px;
border: 1px solid var(--color-light-gray);
background: var(--color-white);
color: var(--color-dark);
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
text-transform: none;
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
}
.documents-actions .doc-card:focus-visible {
outline: 3px solid rgba(14, 89, 33, 0.12);
outline-offset: 2px;
}
.documents-actions .doc-card .icon {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(14, 89, 33, 0.06);
color: var(--color-primary);
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
}
.documents-actions .doc-card .title {
display: block;
font-weight: 700;
color: var(--color-dark);
}
.documents-actions .doc-card .meta {
display: block;
font-size: 0.9rem;
color: var(--color-gray);
margin-top: 2px;
}
.documents-actions .doc-card .doc-desc {
display: block;
font-size: 0.9rem;
color: var(--color-gray);
margin-top: 6px;
font-weight: 400;
}
.documents-actions .doc-card:hover {
border-color: var(--color-primary);
transform: translateY(-3px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}
/* SVG icons for each document (kept as background-images) */
.documents-actions a[href*="CCUSEACOLRICAURTE.pdf"] .icon {
background-image: url("data:image/svg+xml;utf8,");
}
.documents-actions a[href*="PPSASEACOLRICAURTE.pdf"] .icon {
background-image: url("data:image/svg+xml;utf8,");
}
.documents-actions a[href*="PGIRS.pdf"] .icon {
background-image: url("data:image/svg+xml;utf8,");
}
/* Compliance note — more formal and centered */
.compliance-note {
flex: 0 0 220px;
background: var(--color-white);
padding: 1rem 1.25rem;
border-radius: calc(var(--border-radius) - 2px);
box-shadow: none;
border-left: 4px solid rgba(14, 89, 33, 0.1);
margin-left: 0.5rem;
align-self: center;
}
.compliance-note p {
margin: 0;
color: var(--color-gray);
font-size: 0.95rem;
}
.compliance-note strong {
color: var(--color-dark);
font-weight: 700;
}
/* Keep responsive behavior */
@media (max-width: 900px) {
.documents-actions {
flex-direction: column;
align-items: stretch;
}
.compliance-note {
flex: 1 1 auto;
order: 2;
margin-left: 0;
align-self: stretch;
}
.documents-actions .action-group {
order: 1;
}
}
/* Desktop layout: place the compliance note on the right and align cards neatly */
@media (min-width: 901px) {
.documents-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 1.5rem;
align-items: start;
}
.documents-actions .action-group {
order: 0;
}
/* Make the document cards a vertical grid for consistent spacing */
.documents-actions .btn-group {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
align-items: start;
}
.documents-actions .doc-card {
width: 100%;
}
/* Style the compliance note to match the cards and stick to the right */
.compliance-note {
order: 1;
align-self: start;
margin-left: 0;
padding-top: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
}
/* Ensure action group doesn't shrink too far next to the note */
.documents-actions .action-group {
flex: 1 1 auto;
max-width: calc(100% - 240px);
}
/* SVG icons for each document */
.documents-actions a[href*="CCUSEACOLRICAURTE.pdf"] .icon {
background-image: url("data:image/svg+xml;utf8,");
}
.documents-actions a[href*="PPSASEACOLRICAURTE.pdf"] .icon {
background-image: url("data:image/svg+xml;utf8,");
}
.documents-actions a[href*="PGIRS.pdf"] .icon {
background-image: url("data:image/svg+xml;utf8,");
}
/* Compliance note — more formal */
.compliance-note {
flex: 0 0 220px;
background: var(--color-white);
padding: 1rem 1.25rem;
border-radius: calc(var(--border-radius) - 2px);
box-shadow: none;
border-left: 4px solid rgba(14, 89, 33, 0.1);
margin-left: 0.75rem;
}
.compliance-note p {
margin: 0;
color: var(--color-gray);
font-size: 0.95rem;
}
.compliance-note strong {
color: var(--color-dark);
font-weight: 700;
}
/* Keep responsive behavior */
@media (max-width: 900px) {
.documents-actions {
flex-direction: column;
align-items: stretch;
}
.compliance-note {
flex: 1 1 auto;
order: 2;
margin-left: 0;
}
.documents-actions .action-group {
order: 1;
}
}
/* Ensure action group doesn't shrink too far next to the note */
.documents-actions .action-group {
flex: 1 1 auto;
max-width: calc(100% - 240px);
}
@media (max-width: 640px) {
.document-header {
gap: 0.75rem;
}
.document-icon {
width: 52px;
height: 52px;
font-size: 1.2rem;
}
.info-item strong {
min-width: 120px;
}
.documents-actions .btn {
min-width: unset;
width: 100%;
}
.documents-actions {
gap: 1rem;
}
}
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
}
.hero {
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-white) 100%
);
color: var(--color-dark);
padding: 8rem 0 4rem;
text-align: center;
}
.hero h1 {
color: var(--color-dark);
margin-bottom: 0.75rem;
font-size: 3.4rem;
font-weight: 800;
letter-spacing: -0.5px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.hero p {
color: var(--color-gray);
font-size: 1.15rem;
margin-bottom: 2.25rem;
font-weight: 500;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Servicios Especiales — tarjetas y estilo */
.special-service {
background: var(--color-white);
border-radius: calc(var(--border-radius) - 2px);
padding: 1.25rem;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
border-left: 4px solid rgba(14, 89, 33, 0.06);
transition: var(--transition);
}
.special-service h4 {
margin-bottom: 0.6rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--color-dark);
display: flex;
gap: 0.6rem;
align-items: center;
}
.special-service p {
margin: 0 0 0.6rem 0;
color: var(--color-gray);
font-size: 0.95rem;
}
.special-service ul {
margin: 0.5rem 0 0 1.1rem;
padding: 0;
}
.special-service li {
margin-bottom: 0.35rem;
color: var(--color-gray);
font-size: 0.95rem;
}
.special-service .contact-info p,
.special-service .contact-info strong {
margin: 0;
color: var(--color-dark);
}
.special-service:hover,
.special-service:focus-within {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
@media (max-width: 900px) {
.special-service {
padding: 1rem;
}
}
/* Atención al Usuario: estilos para contacto */
.contact-info {
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem;
}
@media (min-width: 900px) {
.contact-info {
grid-template-columns: 1fr 1fr;
}
}
.contact-info p {
margin: 0 0 0.5rem 0;
color: var(--color-gray);
font-size: 0.95rem;
}
.contact-info strong {
color: var(--color-dark);
display: inline-block;
min-width: 110px;
font-weight: 700;
}
.contact-channels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.9rem;
}
.channel-item {
background: var(--color-white);
border-radius: 10px;
padding: 0.9rem 1rem;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
border-left: 4px solid rgba(14, 89, 33, 0.06);
transition: var(--transition);
}
.channel-item h4 {
margin: 0 0 0.35rem 0;
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--color-dark);
}
.channel-item p {
margin: 0;
color: var(--color-gray);
font-size: 0.95rem;
}
.channel-item strong {
color: var(--color-dark);
font-weight: 700;
}
.office-services {
margin-top: 0.75rem;
}
.office-services h4 {
margin-bottom: 0.5rem;
font-weight: 700;
}
.office-services ul {
margin: 0;
padding-left: 1.1rem;
}
.channel-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
/* Header */
.header {
background: var(--color-white);
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.header.scrolled {
box-shadow: var(--shadow);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--color-dark);
}
.logo img {
height: 40px;
width: auto;
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
.nav-links a {
font-weight: 600;
color: var(--color-gray);
padding: 0.5rem;
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--color-primary);
transition: var(--transition);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.nav-links a.active {
color: var(--color-primary);
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.mobile-menu-toggle span {
display: block;
width: 25px;
height: 3px;
background: var(--color-dark);
margin: 5px 0;
transition: var(--transition);
}
/* Dropdown styles */
.dropdown {
position: relative;
}
.dropdown .dropdown-toggle-arrow {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
margin-left: 0.5rem;
vertical-align: middle;
transition: transform 0.3s ease;
cursor: pointer;
}
.dropdown.open .dropdown-toggle-arrow {
transform: rotate(180deg);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 8px;
overflow: hidden;
top: 100%;
left: 0;
margin-top: 0.5rem;
}
.dropdown.open .dropdown-content {
display: block;
}
/* Hover en desktop - Pantallas grandes (>900px) */
@media (min-width: 901px) {
/* Mostrar dropdown al hacer hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Rotar flecha al hacer hover */
.dropdown:hover .dropdown-toggle-arrow {
transform: rotate(180deg);
}
/* Ocultar la flecha en desktop (solo usamos hover) */
.dropdown .dropdown-toggle-arrow {
display: none;
}
}
/* Móvil - Pantallas pequeñas (≤900px) */
@media (max-width: 900px) {
/* Mostrar la flecha en móvil */
.dropdown .dropdown-toggle-arrow {
display: inline-block;
}
/* Asegurar que el dropdown esté debajo del menú */
.dropdown-content {
position: static;
box-shadow: none;
margin-top: 0;
border-radius: 0;
background-color: rgba(0, 0, 0, 0.02);
}
}
.dropdown-content a {
display: block;
padding: 0.75rem 1.5rem;
color: var(--color-gray);
transition: all 0.2s ease;
}
.dropdown-content a:hover {
background: var(--color-neutral);
color: var(--color-primary);
}
/* Evitar que los enlaces del dropdown muestren el subrayado */
.dropdown-content a::after {
display: none;
}
/* Hero Section */
.hero-section {
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-white) 100%
);
color: var(--color-dark);
padding: 8rem 0 4rem;
}
.hero-section .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-content h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--color-dark);
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
color: var(--color-gray);
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-buttons .btn-outline {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.hero-buttons .btn-outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
.hero-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: var(--border-radius);
box-shadow: var(--shadow-hover);
}
/* Services Section */
.services-section {
background-color: var(--color-neutral);
}
/* Horarios y rutinas: evitar solapamientos en tarjetas */
.schedule-info {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: flex-start;
}
/* Centrar mapa del área de prestación del servicio */
.map-container {
text-align: center;
}
.map-container img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.schedule-item {
flex: 1 1 180px;
min-width: 150px;
}
.coverage {
margin-top: 0.75rem;
}
.coverage ul {
margin: 0;
padding-left: 1.25rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
/* Used for CCU/PPSA 'Servicios Autorizados / Contratados' lists */
.services-authorized h4 {
color: var(--color-primary);
margin-bottom: 0.75rem;
}
.services-grid .service-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--color-white);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);
transition: var(--transition);
}
.services-grid .service-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.service-check {
color: var(--color-accent);
font-size: 1.1rem;
min-width: 1.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.service-item span:last-child {
color: var(--color-dark);
line-height: 1.2;
}
.service-card {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.service-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.service-card h3 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.service-card p {
color: var(--color-gray);
margin-bottom: 1.5rem;
}
.service-card ul {
list-style: none;
padding: 0;
text-align: left;
}
.service-card li {
color: var(--color-gray);
margin-bottom: 0.5rem;
padding-left: 1rem;
position: relative;
}
.service-card li:before {
content: "✓";
color: var(--color-secondary);
position: absolute;
left: 0;
font-weight: bold;
}
.services-cta {
text-align: center;
}
/* Municipalities Section */
.municipalities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
.municipality-card {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
display: flex;
flex-direction: column;
height: 100%;
}
.municipality-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.municipality-card h3 {
color: var(--color-primary);
text-align: center;
margin-bottom: 1.5rem;
}
.municipality-info {
margin-bottom: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.municipality-info .info-row {
display: flex;
margin-bottom: 0.75rem;
align-items: flex-start;
gap: 1rem;
}
.municipality-info .info-label {
color: var(--color-primary);
font-weight: 600;
min-width: 160px;
width: 160px;
flex-shrink: 0;
text-align: right;
}
.municipality-info .info-value {
color: var(--color-gray);
flex: 1;
text-align: left;
}
.municipality-info p {
color: var(--color-gray);
margin-bottom: 0.5rem;
}
.municipality-info strong {
color: var(--color-primary);
}
.municipality-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: var(--border-radius);
backdrop-filter: blur(10px);
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--color-secondary);
}
.stat-label {
font-size: 0.9rem;
opacity: 0.9;
}
.coverage-summary {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow);
text-align: center;
}
.coverage-summary h3 {
color: var(--color-primary);
margin-bottom: 2rem;
}
.summary-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.summary-stat {
padding: 1rem;
background: var(--color-neutral);
border-radius: var(--border-radius);
}
.summary-number {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.summary-label {
color: var(--color-gray);
font-size: 0.9rem;
}
/* Activities Section */
.activities-section {
background-color: var(--color-neutral);
}
.activities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.activity-card {
background: var(--color-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.activity-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.activity-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.activity-content {
padding: 1.5rem;
}
.activity-date {
color: var(--color-accent);
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.activity-content h3 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.activity-content p {
color: var(--color-gray);
margin: 0;
}
.activities-cta {
text-align: center;
}
/* Contact Section */
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.contact-info {
background: var(--color-white);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.contact-info h3,
.contact-form h3 {
color: var(--color-primary);
margin-bottom: 2rem;
}
.contact-items {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.contact-card .contact-items {
grid-template-columns: repeat(2, 1fr);
align-items: start;
}
.contact-card .contact-item {
align-items: flex-start;
}
.contact-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.contact-actions .btn {
min-width: 140px;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* Spacing rules for action buttons on smaller viewports */
@media (max-width: 767px) {
.contact-actions .btn {
flex: 1 1 calc(50% - 0.5rem);
min-width: 0;
}
}
@media (max-width: 480px) {
.contact-actions .btn {
flex: 1 1 100%;
}
}
/* Add bottom margin specifically for contact cards so they don't collide with other sections */
.contact-card {
margin-bottom: 1.5rem;
}
/* Floating buttons container */
.floating-buttons-container {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
z-index: 1000;
}
@media (max-width: 480px) {
.floating-buttons-container {
right: 0.5rem;
gap: 0.5rem;
}
}
/* Back to top button styles */
.back-to-top {
width: 50px;
height: 50px;
display: none;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
/* Floating WhatsApp button (esquina derecha) */
.whatsapp-float {
width: 50px;
height: 50px;
background-color: #25d366;
color: #fff;
border-radius: 50%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
cursor: pointer;
border: none;
flex-shrink: 0;
}
.whatsapp-float:hover,
.whatsapp-float:focus {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
outline: none;
}
/* Prevent floating button from covering page content: add bottom padding when present */
.has-whatsapp main {
padding-bottom: 100px;
}
/* Documents actions spacing */
.documents-actions {
margin-top: 1rem;
margin-bottom: 1.5rem;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
.documents-actions .btn {
min-width: 140px;
}
/* Contact channels layout */
.contact-channels {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.contact-channels {
grid-template-columns: 1fr;
}
}
.channel-item {
background: var(--color-white);
padding: 1rem;
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);
}
.channel-item h4 {
color: var(--color-primary);
margin-bottom: 0.25rem;
}
.channel-item p {
color: var(--color-gray);
margin: 0;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
}
.contact-icon {
font-size: 1.5rem;
min-width: 2rem;
}
.contact-item h4 {
color: var(--color-primary);
margin-bottom: 0.25rem;
}
.contact-item p {
color: var(--color-gray);
margin: 0;
}
.contact-form {
background: var(--color-white);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--color-primary);
font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--color-light-gray);
border-radius: var(--border-radius);
font-size: 1rem;
transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
}
.form-group textarea {
resize: vertical;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
color: var(--color-gray);
font-size: 0.9rem;
}
.checkbox-label input[type="checkbox"] {
width: auto;
margin: 0;
}
.checkbox-label a {
color: var(--color-primary);
text-decoration: underline;
}
/* Footer */
.footer {
background-color: var(--color-accent);
color: var(--color-white);
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2rem;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.footer-logo img {
width: 40px;
height: 40px;
object-fit: contain;
}
.footer-logo span {
color: var(--color-white);
}
.footer-section h3 {
color: var(--color-secondary);
margin-bottom: 1rem;
}
.footer-section p {
color: var(--color-neutral);
margin-bottom: 1rem;
line-height: 1.6;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: var(--color-neutral);
text-decoration: none;
transition: var(--transition);
}
.footer-section ul li a:hover {
color: var(--color-secondary);
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
text-decoration: none;
font-size: 1.2rem;
transition: var(--transition);
}
.social-link:hover {
background: var(--color-secondary);
transform: translateY(-2px);
}
.contact-info p {
margin-bottom: 0.5rem;
color: var(--color-accent);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-legal p {
color: var(--color-neutral);
margin: 0;
font-size: 0.9rem;
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
color: var(--color-neutral);
text-decoration: none;
font-size: 0.9rem;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--color-secondary);
}
/* Responsive improvements: mobile & tablet */
@media (max-width: 900px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--color-white);
flex-direction: column;
padding: 1rem 0;
box-shadow: var(--shadow);
}
.nav-links.open {
display: flex;
}
.nav-links li {
text-align: center;
}
.mobile-menu-toggle {
display: block;
}
.mobile-menu-toggle.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.open span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.open span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.hero-section .container {
grid-template-columns: 1fr;
gap: 2rem;
}
.hero-section {
padding: 4rem 0 2rem;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-image img,
.hero-carousel {
height: 240px;
object-fit: cover;
}
.section {
padding: 1.25rem 0;
}
.container {
padding: 0 1rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 640px) {
.nav-links {
padding: 0.75rem;
}
.hero-content h1 {
font-size: 1.6rem;
}
.hero-image img,
.hero-carousel {
height: 180px;
}
.hero-buttons {
flex-direction: column;
gap: 0.75rem;
}
.hero-buttons .btn {
width: 100%;
}
.service-card {
padding: 1rem;
}
.footer-content {
grid-template-columns: 1fr;
}
.container {
padding: 0 0.75rem;
}
.contact-form {
padding: 1rem;
}
.whatsapp-float {
right: 0.75rem;
bottom: 0.75rem;
}
}
/* Tables and iframes: enable horizontal scroll on small screens */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Ensure images and videos fill their containers */
.responsive-media {
max-width: 100%;
height: auto;
display: block;
}
/* Small tweaks for accessibility and touch targets */
@media (max-width: 900px) {
.nav-links a {
font-size: 1rem;
}
.btn {
padding: 12px 18px;
font-size: 0.95rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.footer-content {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.footer-logo {
margin-bottom: 0.75rem;
}
}
/* About Page Styles */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.photo-card {
background: var(--color-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.photo-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.photo-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.photo-info {
padding: 1.5rem;
}
.photo-info h3 {
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.photo-info p {
color: var(--color-gray);
margin: 0;
}
.value-card {
text-align: center;
padding: 2rem;
background: var(--color-white);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
transition: var(--transition);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.value-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.value-card h3 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.value-card p {
color: var(--color-gray);
margin: 0;
}
/* Services Page Styles */
.tariff-table {
background: var(--color-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 1rem;
background: var(--color-primary);
color: var(--color-white);
padding: 1rem;
font-weight: 600;
}
.table-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 1rem;
padding: 1rem;
border-bottom: 1px solid var(--color-light-gray);
}
.table-row:last-child {
border-bottom: none;
}
.tariff-note {
text-align: center;
color: var(--color-gray);
font-style: italic;
margin-top: 1rem;
}
.route-card {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 1.5rem;
box-shadow: var(--shadow);
border-left: 4px solid var(--color-primary);
transition: var(--transition);
}
.route-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.route-card h3 {
color: var(--color-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.route-card h3:before {
content: "🚛";
font-size: 1.2rem;
}
.route-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.route-info p {
margin: 0;
padding: 0.5rem;
background: var(--color-neutral);
border-radius: 4px;
font-size: 0.9rem;
}
.route-coverage {
grid-column: 1 / -1;
}
.route-coverage h4 {
color: var(--color-accent);
margin-bottom: 0.5rem;
font-size: 1rem;
}
.route-coverage ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.3rem;
list-style: none;
padding: 0;
}
.route-coverage li {
background: var(--color-secondary);
padding: 0.3rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
text-align: center;
}
/* Program Features Styles */
.program-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.feature-card {
background: var(--color-white);
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.feature-card h4 {
color: var(--color-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.feature-card ul {
list-style: none;
padding: 0;
}
.feature-card li {
padding: 0.4rem 0;
border-bottom: 1px solid var(--color-light-gray);
font-size: 0.9rem;
}
.feature-card li:last-child {
border-bottom: none;
}
/* Services Detail Grid */
.services-detail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.service-detail-card {
background: var(--color-white);
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
}
.service-detail-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.service-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}
.service-detail-card h3 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.service-detail-card ul {
list-style: none;
padding: 0;
text-align: left;
}
.service-detail-card li {
padding: 0.4rem 0;
border-bottom: 1px solid var(--color-light-gray);
font-size: 0.9rem;
position: relative;
padding-left: 1.5rem;
}
.service-detail-card li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
}
.service-detail-card li:last-child {
border-bottom: none;
}
/* Contact Information Styles */
.contact-melgar,
.contact-chaparral,
.contact-coello {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.contact-card {
background: var(--color-white);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.contact-card h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
text-align: center;
}
.contact-details {
display: grid;
gap: 1rem;
}
.contact-details p {
margin: 0;
padding: 0.5rem;
background: var(--color-neutral);
border-radius: 4px;
border-left: 3px solid var(--color-primary);
}
.emergency-contact {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 3rem;
box-shadow: var(--shadow);
text-align: center;
}
.emergency-contact h2 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.emergency-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 2rem;
text-align: left;
}
.emergency-info h3,
.emergency-types h3 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.emergency-methods {
display: grid;
gap: 1.5rem;
}
.emergency-method {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--color-neutral);
border-radius: var(--border-radius);
border-left: 4px solid var(--color-accent);
}
.method-icon {
font-size: 2rem;
min-width: 50px;
}
.method-info h4 {
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.emergency-number {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-accent);
margin: 0.5rem 0;
}
.method-info p:not(.emergency-number) {
color: var(--color-gray);
margin: 0;
}
.emergency-types ul {
list-style: none;
padding: 0;
}
.emergency-types li {
padding: 0.8rem 0;
border-bottom: 1px solid var(--color-light-gray);
color: var(--color-gray);
position: relative;
padding-left: 1.5rem;
}
.emergency-types li:before {
content: "⚠️";
position: absolute;
left: 0;
color: var(--color-primary);
}
.emergency-types li:last-child {
border-bottom: none;
}
/* Simple Office Cards - Minimalist Style */
.offices-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.office-card {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
border-left: 4px solid var(--color-primary);
}
.office-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.office-card h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.3rem;
}
.office-info p {
margin-bottom: 1rem;
color: var(--color-gray);
line-height: 1.6;
}
.office-info strong {
color: var(--color-accent);
font-weight: 600;
}
/* Emergency Section Styles */
.emergency-section {
max-width: 1000px;
margin: 0 auto;
}
.emergency-header {
text-align: center;
margin-bottom: 3rem;
}
.emergency-header h2 {
color: var(--color-primary);
margin-bottom: 1rem;
font-size: 2.2rem;
}
.emergency-header p {
color: var(--color-gray);
font-size: 1.1rem;
max-width: 500px;
margin: 0 auto;
}
.emergency-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.emergency-card {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 2.5rem;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.emergency-card:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.emergency-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.emergency-card.primary {
border: 2px solid var(--color-primary);
}
.emergency-card.secondary {
border: 2px solid var(--color-accent);
}
.emergency-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
}
.emergency-content h3 {
color: var(--color-primary);
margin-bottom: 1rem;
font-size: 1.4rem;
}
.emergency-number {
font-size: 2rem;
font-weight: 700;
color: var(--color-accent);
margin: 1rem 0;
text-decoration: none;
display: block;
}
.emergency-content p {
color: var(--color-gray);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.emergency-availability {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--color-accent);
font-weight: 600;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: #28a745;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
}
}
.emergency-types-card {
background: var(--color-white);
border-radius: var(--border-radius);
padding: 3rem;
box-shadow: var(--shadow);
border-top: 4px solid var(--color-primary);
}
.emergency-types-card h3 {
text-align: center;
color: var(--color-primary);
margin-bottom: 2rem;
font-size: 1.5rem;
}
.emergency-types-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.emergency-type {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--color-neutral);
border-radius: var(--border-radius);
border-left: 4px solid var(--color-accent);
transition: var(--transition);
}
.emergency-type:hover {
transform: translateX(5px);
box-shadow: var(--shadow);
}
.type-icon {
font-size: 2rem;
min-width: 3rem;
text-align: center;
}
.type-content h4 {
color: var(--color-primary);
margin-bottom: 0.3rem;
font-size: 1.1rem;
}
.type-content p {
color: var(--color-gray);
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
}
/* Enhanced Contact Info Styles */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.info-item {
background: var(--color-white);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
transition: var(--transition);
border-left: 4px solid var(--color-primary);
}
.info-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.info-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: center;
background: var(--color-neutral);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.info-content h3 {
color: var(--color-primary);
text-align: center;
margin-bottom: 1.5rem;
font-size: 1.3rem;
}
.info-details {
display: grid;
gap: 1rem;
}
.info-details p {
margin: 0;
padding: 0.8rem;
background: var(--color-neutral);
border-radius: var(--border-radius);
border-left: 3px solid var(--color-accent);
font-size: 0.9rem;
line-height: 1.4;
}
.info-details strong {
color: var(--color-primary);
display: block;
margin-bottom: 0.3rem;
font-weight: 600;
}
/* Normatividad Specific Styles */
/* CCU Grid */
.ccu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.ccu-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ccu-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.ccu-card h3 {
color: var(--color-primary);
margin-bottom: 1rem;
font-size: 1.5rem;
}
.ccu-card p {
margin: 0.5rem 0;
color: var(--color-gray);
}
/* Policy Content Two-Column Layout */
.policy-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.policy-info h3,
.policy-rights h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.policy-details {
margin-top: 2rem;
}
.policy-item {
background: white;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.policy-item h4 {
color: var(--color-primary);
margin-bottom: 0.75rem;
}
.rights-section {
margin-bottom: 2rem;
}
.rights-section h4 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.rights-section ul {
list-style: none;
padding: 0;
}
.rights-section li {
padding: 0.5rem 0;
border-bottom: 1px solid #f0f0f0;
}
.rights-section li:before {
content: "✓";
color: var(--color-success);
font-weight: bold;
margin-right: 0.5rem;
}
.policy-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
/* PGIRS Grid */
.pgirs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.pgirs-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.pgirs-card:hover {
transform: translateY(-3px);
}
.pgirs-card h3 {
color: var(--color-primary);
margin-bottom: 1rem;
text-align: center;
}
.pgirs-card p {
margin: 0.75rem 0;
color: var(--color-gray);
}
.pgirs-actions {
margin-top: 1.5rem;
text-align: center;
}
/* Compliance Content Two-Column Layout */
.compliance-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.compliance-info h3,
.compliance-form h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.compliance-items {
margin-top: 2rem;
}
.compliance-item {
display: flex;
align-items: flex-start;
gap: 1rem;
background: white;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.compliance-icon {
font-size: 2rem;
flex-shrink: 0;
}
.compliance-item h4 {
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.compliance-item p {
color: var(--color-gray);
margin: 0;
line-height: 1.6;
}
.compliance-form {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
height: fit-content;
}
/* Responsive Design for Normatividad */
@media (max-width: 768px) {
.policy-content,
.compliance-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.ccu-grid,
.pgirs-grid {
grid-template-columns: 1fr;
}
.policy-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.ccu-card,
.pgirs-card,
.compliance-form {
padding: 1.5rem;
}
.policy-item,
.compliance-item {
padding: 1rem;
}
}
/* Services Page Specific Styles - NO afecta otras páginas */
/* Schedule Content Two-Column Layout for Services */
.services-schedule-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.services-schedule-info h3,
.services-schedule-locations h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.services-schedule-details {
margin-top: 2rem;
}
.services-schedule-item {
background: white;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.services-schedule-item h4 {
color: var(--color-primary);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.services-schedule-item p {
margin: 0.5rem 0;
color: var(--color-gray);
}
.services-locations-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.services-location-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
position: relative;
}
.services-location-card h4 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.services-location-card ul {
list-style: none;
padding: 0;
margin-bottom: 1rem;
}
.services-location-card li {
padding: 0.25rem 0;
color: var(--color-gray);
}
.services-location-card li:before {
content: "🌿";
margin-right: 0.5rem;
}
.services-priority-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--color-success);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}
.services-priority-badge.secondary {
background: var(--color-warning);
}
.services-schedule-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
/* Notice Content Two-Column Layout for Services */
.services-notice-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.services-notice-info h3,
.services-notice-contact h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.services-notice-channels {
margin-top: 2rem;
}
.services-channel-item {
display: flex;
align-items: flex-start;
gap: 1rem;
background: white;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.services-channel-icon {
font-size: 2rem;
flex-shrink: 0;
}
.services-channel-item h4 {
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.services-channel-item p {
color: var(--color-gray);
margin: 0;
}
.services-notice-form {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.services-emergency-contact {
background: #fff3f3;
border: 2px solid #ffebee;
padding: 1.5rem;
border-radius: 8px;
text-align: center;
}
.services-emergency-contact h4 {
color: var(--color-danger);
margin-bottom: 0.5rem;
}
.services-emergency-contact p {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-danger);
}
/* Donde Operamos Page Specific Styles - NO afecta otras páginas */
/* Municipalities Grid for Donde Operamos */
.donde-municipalities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.donde-municipality-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.donde-municipality-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.donde-municipality-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f0f0f0;
}
.donde-municipality-header h3 {
color: var(--color-primary);
margin: 0;
font-size: 1.5rem;
}
.donde-badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.donde-badge.principal {
background: var(--color-primary);
color: white;
}
.donde-badge.operacion {
background: var(--color-success);
color: white;
}
.donde-municipality-info {
margin-bottom: 1.5rem;
}
.donde-municipality-info p {
margin: 0.5rem 0;
color: var(--color-gray);
}
.donde-services-list h4 {
color: var(--color-primary);
margin-bottom: 1rem;
font-size: 1rem;
}
.donde-services-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.donde-service-tag {
background: var(--color-neutral);
color: var(--color-primary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
/* Statistics Grid for Donde Operamos */
.donde-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.donde-stat-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.donde-stat-card:hover {
transform: translateY(-3px);
}
.donde-stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.donde-stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.donde-stat-label {
color: var(--color-gray);
font-weight: 500;
}
/* Regional Content Two-Column Layout for Donde Operamos */
.donde-regional-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.donde-regional-info h3,
.donde-regional-features h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.donde-region-stats {
margin-top: 2rem;
}
.donde-region-stat {
background: white;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.donde-region-stat h4 {
color: var(--color-primary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.donde-region-stat p {
margin: 0;
color: var(--color-gray);
}
.donde-features-grid {
display: grid;
gap: 1.5rem;
}
.donde-feature-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.donde-feature-card:hover {
transform: translateX(5px);
}
.donde-feature-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.donde-feature-card h4 {
color: var(--color-primary);
margin-bottom: 0.75rem;
}
.donde-feature-card p {
color: var(--color-gray);
margin: 0;
line-height: 1.5;
}
/* Responsive Design for Donde Operamos Only */
@media (max-width: 768px) {
.donde-municipalities-grid {
grid-template-columns: 1fr;
}
.donde-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.donde-regional-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.donde-municipality-header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
@media (max-width: 480px) {
.donde-stats-grid {
grid-template-columns: 1fr;
}
.donde-municipality-card,
.donde-stat-card,
.donde-region-stat,
.donde-feature-card {
padding: 1rem;
}
.donde-services-tags {
justify-content: center;
}
}
/* Melgar Municipality Page Specific Styles - NO afecta otras páginas */
/* Municipality Content Two-Column Layout for Melgar */
.melgar-municipality-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.melgar-municipality-info h2 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.melgar-contact-info {
margin-top: 2rem;
}
.melgar-contact-item {
background: white;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.melgar-contact-item h4 {
color: var(--color-primary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.melgar-contact-item p {
margin: 0;
color: var(--color-gray);
}
.melgar-municipality-stats h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.melgar-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.melgar-stat-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease;
}
.melgar-stat-card:hover {
transform: translateY(-3px);
}
.melgar-stat-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.melgar-stat-number {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.25rem;
}
.melgar-stat-label {
color: var(--color-gray);
font-size: 0.9rem;
}
/* CCU Content Two-Column Layout for Melgar */
.melgar-ccu-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.melgar-ccu-info h3,
.melgar-ccu-services h3 {
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.melgar-ccu-details {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.melgar-ccu-details p {
margin: 1rem 0;
color: var(--color-gray);
}
.melgar-services-grid {
display: grid;
gap: 0.75rem;
margin-bottom: 2rem;
}
.melgar-service-item {
background: white;
padding: 1rem;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
color: var(--color-gray);
}
.melgar-ccu-actions {
display: flex;
gap: 1rem;
}
/* Routes Grid for Melgar */
.melgar-routes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.melgar-route-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.melgar-route-card:hover {
transform: translateY(-3px);
}
.melgar-route-card h3 {
color: var(--color-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.melgar-route-card p {
margin: 0.5rem 0;
color: var(--color-gray);
}
.melgar-sectors {
background: var(--color-neutral);
color: var(--color-primary);
padding: 0.75rem;
border-radius: 6px;
margin-top: 1rem;
font-size: 0.9rem;
font-weight: 500;
}
/* Responsive Design for Melgar Only */
@media (max-width: 768px) {
.melgar-municipality-content,
.melgar-ccu-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.melgar-stats-grid {
grid-template-columns: 1fr;
}
.melgar-routes-grid {
grid-template-columns: 1fr;
}
.melgar-ccu-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.melgar-contact-item,
.melgar-stat-card,
.melgar-ccu-details,
.melgar-route-card {
padding: 1rem;
}
}
/* =============================================================================
ESTILOS ESPECÍFICOS PARA CHAPARRAL.HTML
============================================================================= */
/* Información del municipio - Layout horizontal */
.chaparral-municipality-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-bottom: 3rem;
}
.chaparral-municipality-header {
text-align: left;
}
.chaparral-municipality-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.chaparral-municipality-description {
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: 2rem;
}
.chaparral-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.chaparral-stat-card {
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-accent)
);
color: white;
padding: 1.5rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.chaparral-stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.chaparral-stat-label {
display: block;
font-size: 0.9rem;
opacity: 0.9;
}
/* CCU - Card minimalista */
.chaparral-ccu-container {
max-width: 800px;
margin: 0 auto;
}
.chaparral-ccu-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.chaparral-ccu-header {
text-align: center;
margin-bottom: 2rem;
}
.chaparral-ccu-header h3 {
font-size: 1.8rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.chaparral-ccu-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.chaparral-ccu-info-item {
padding: 1rem;
background: var(--color-neutral);
border-radius: 8px;
}
.chaparral-ccu-info-item strong {
color: var(--color-primary);
display: block;
margin-bottom: 0.5rem;
}
.chaparral-ccu-services {
margin-top: 2rem;
}
.chaparral-ccu-services h4 {
font-size: 1.2rem;
color: var(--color-primary);
margin-bottom: 1rem;
}
.chaparral-ccu-services ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
list-style: none;
padding: 0;
}
.chaparral-ccu-services li {
padding: 0.5rem 0;
font-size: 0.95rem;
}
.chaparral-ccu-actions {
display: flex;
gap: 1rem;
}
/* Rutas y horarios - Grid optimizado */
.chaparral-routes-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.chaparral-route-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--color-primary);
transition: transform 0.2s ease;
}
.chaparral-route-card:hover {
transform: translateY(-2px);
}
.chaparral-route-card h3 {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.chaparral-route-schedule {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.chaparral-schedule-item {
text-align: center;
padding: 0.5rem;
background: var(--color-neutral);
border-radius: 6px;
}
.chaparral-schedule-item strong {
display: block;
color: var(--color-primary);
font-size: 0.85rem;
margin-bottom: 0.25rem;
}
.chaparral-coverage h4 {
font-size: 1rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.chaparral-coverage ul {
list-style: none;
padding: 0;
}
.chaparral-coverage li {
padding: 0.25rem 0;
font-size: 0.9rem;
position: relative;
padding-left: 1rem;
}
.chaparral-coverage li::before {
content: "📍";
position: absolute;
left: 0;
}
/* Programa de reciclaje - Layout horizontal */
.chaparral-recycling-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: start;
}
.chaparral-recycling-info {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
padding: 2rem;
border-radius: 16px;
}
.chaparral-recycling-info h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.chaparral-recycling-features {
display: grid;
gap: 1.5rem;
}
.chaparral-feature-card {
background: white;
color: var(--color-text);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.chaparral-feature-card h4 {
color: var(--color-primary);
font-size: 1.1rem;
margin-bottom: 1rem;
}
.chaparral-feature-card ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.chaparral-feature-card li {
padding: 0.5rem 0;
font-size: 0.9rem;
}
/* Servicios específicos - Grid mejorado */
.chaparral-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.chaparral-service-card {
background: white;
padding: 2rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.chaparral-service-card:hover {
transform: translateY(-4px);
}
.chaparral-service-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.chaparral-service-card h3 {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.chaparral-service-card ul {
list-style: none;
padding: 0;
text-align: left;
}
.chaparral-service-card li {
padding: 0.5rem 0;
font-size: 0.9rem;
position: relative;
padding-left: 1.5rem;
}
.chaparral-service-card li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: bold;
}
/* Contacto - Layout horizontal */
.chaparral-contact-container {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3rem;
align-items: start;
}
.chaparral-contact-card {
background: white;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.chaparral-contact-card h3 {
color: var(--color-primary);
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.chaparral-contact-details p {
margin-bottom: 1rem;
font-size: 0.95rem;
}
.chaparral-emergency {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
padding: 1.5rem;
border-radius: 12px;
margin: 2rem 0;
}
.chaparral-emergency h4 {
margin-bottom: 1rem;
}
.chaparral-office-services {
margin-top: 2rem;
}
.chaparral-office-services h4 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.chaparral-office-services ul {
list-style: none;
padding: 0;
}
.chaparral-office-services li {
padding: 0.5rem 0;
font-size: 0.9rem;
position: relative;
padding-left: 1.5rem;
}
.chaparral-office-services li::before {
content: "🏢";
position: absolute;
left: 0;
}
.chaparral-indicators-container {
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-accent)
);
color: white;
padding: 2rem;
border-radius: 16px;
}
.chaparral-indicators-container h3 {
text-align: center;
margin-bottom: 2rem;
font-size: 1.3rem;
}
.chaparral-indicators-grid {
display: grid;
gap: 1.5rem;
}
.chaparral-indicator {
text-align: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.chaparral-indicator-value {
font-size: 2rem;
font-weight: 700;
display: block;
margin-bottom: 0.5rem;
}
.chaparral-indicator-label {
font-size: 0.85rem;
opacity: 0.9;
}
/* Responsive Design para Chaparral */
@media (max-width: 768px) {
.chaparral-municipality-info,
.chaparral-ccu-details,
.chaparral-route-schedule,
.chaparral-recycling-container,
.chaparral-contact-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.chaparral-stats-grid {
grid-template-columns: 1fr;
}
.chaparral-ccu-services ul,
.chaparral-feature-card ul {
grid-template-columns: 1fr;
}
.chaparral-routes-container {
grid-template-columns: 1fr;
}
.chaparral-services-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.chaparral-ccu-card,
.chaparral-contact-card {
padding: 1.5rem;
}
.chaparral-recycling-info {
padding: 1.5rem;
}
.chaparral-ccu-actions {
flex-direction: column;
}
}
/* =============================================================================
ESTILOS ESPECÍFICOS PARA COELLO.HTML
============================================================================= */
/* Información del municipio - Layout horizontal */
.coello-municipality-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-bottom: 3rem;
}
.coello-municipality-header {
text-align: left;
}
.coello-municipality-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.coello-municipality-description {
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: 2rem;
}
.coello-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.coello-stat-card {
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-accent)
);
color: white;
padding: 1.5rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.coello-stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.coello-stat-label {
display: block;
font-size: 0.9rem;
opacity: 0.9;
}
/* CCU - Card minimalista */
.coello-ccu-container {
max-width: 800px;
margin: 0 auto;
}
.coello-ccu-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.coello-ccu-header {
text-align: center;
margin-bottom: 2rem;
}
.coello-ccu-header h3 {
font-size: 1.8rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.coello-ccu-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.coello-ccu-info-item {
padding: 1rem;
background: var(--color-neutral);
border-radius: 8px;
}
.coello-ccu-info-item strong {
color: var(--color-primary);
display: block;
margin-bottom: 0.5rem;
}
.coello-ccu-services {
margin-top: 2rem;
}
.coello-ccu-services h4 {
font-size: 1.2rem;
color: var(--color-primary);
margin-bottom: 1rem;
}
.coello-ccu-services ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
list-style: none;
padding: 0;
}
.coello-ccu-services li {
padding: 0.5rem 0;
font-size: 0.95rem;
}
.coello-ccu-actions {
display: flex;
gap: 1rem;
}
/* Rutas y horarios - Grid optimizado */
.coello-routes-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.coello-route-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--color-primary);
transition: transform 0.2s ease;
}
.coello-route-card:hover {
transform: translateY(-2px);
}
.coello-route-card h3 {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.coello-route-schedule {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.coello-schedule-item {
text-align: center;
padding: 0.5rem;
background: var(--color-neutral);
border-radius: 6px;
}
.coello-schedule-item strong {
display: block;
color: var(--color-primary);
font-size: 0.85rem;
margin-bottom: 0.25rem;
}
.coello-coverage h4 {
font-size: 1rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.coello-coverage ul {
list-style: none;
padding: 0;
}
.coello-coverage li {
padding: 0.25rem 0;
font-size: 0.9rem;
position: relative;
padding-left: 1rem;
}
.coello-coverage li::before {
content: "📍";
position: absolute;
left: 0;
}
/* Programa especial - Layout horizontal */
.coello-special-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: start;
}
.coello-special-info {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 2rem;
border-radius: 16px;
}
.coello-special-info h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.coello-special-features {
display: grid;
gap: 1.5rem;
}
.coello-feature-card {
background: white;
color: var(--color-text);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.coello-feature-card h4 {
color: var(--color-primary);
font-size: 1.1rem;
margin-bottom: 1rem;
}
.coello-feature-card ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.coello-feature-card li {
padding: 0.5rem 0;
font-size: 0.9rem;
}
/* Servicios específicos - Grid mejorado */
.coello-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.coello-service-card {
background: white;
padding: 2rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.coello-service-card:hover {
transform: translateY(-4px);
}
.coello-service-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.coello-service-card h3 {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.coello-service-card ul {
list-style: none;
padding: 0;
text-align: left;
}
.coello-service-card li {
padding: 0.5rem 0;
font-size: 0.9rem;
position: relative;
padding-left: 1.5rem;
}
.coello-service-card li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: bold;
}
/* Contacto - Layout horizontal */
.coello-contact-container {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3rem;
align-items: start;
}
.coello-contact-card {
background: white;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.coello-contact-card h3 {
color: var(--color-primary);
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.coello-contact-details p {
margin-bottom: 1rem;
font-size: 0.95rem;
}
.coello-emergency {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 1.5rem;
border-radius: 12px;
margin: 2rem 0;
}
.coello-emergency h4 {
margin-bottom: 1rem;
}
.coello-office-services {
margin-top: 2rem;
}
.coello-office-services h4 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.coello-office-services ul {
list-style: none;
padding: 0;
}
.coello-office-services li {
padding: 0.5rem 0;
font-size: 0.9rem;
position: relative;
padding-left: 1.5rem;
}
.coello-office-services li::before {
content: "🏢";
position: absolute;
left: 0;
}
.coello-indicators-container {
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-accent)
);
color: white;
padding: 2rem;
border-radius: 16px;
}
.coello-indicators-container h3 {
text-align: center;
margin-bottom: 2rem;
font-size: 1.3rem;
}
.coello-indicators-grid {
display: grid;
gap: 1.5rem;
}
.coello-indicator {
text-align: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.coello-indicator-value {
font-size: 2rem;
font-weight: 700;
display: block;
margin-bottom: 0.5rem;
}
.coello-indicator-label {
font-size: 0.85rem;
opacity: 0.9;
}
/* Responsive Design para Coello */
@media (max-width: 768px) {
.coello-municipality-info,
.coello-ccu-details,
.coello-route-schedule,
.coello-special-container,
.coello-contact-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.coello-stats-grid {
grid-template-columns: 1fr;
}
.coello-ccu-services ul,
.coello-feature-card ul {
grid-template-columns: 1fr;
}
.coello-routes-container {
grid-template-columns: 1fr;
}
.coello-services-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.coello-ccu-card,
.coello-contact-card {
padding: 1.5rem;
}
.coello-special-info {
padding: 1.5rem;
}
.coello-ccu-actions {
flex-direction: column;
}
}
/* Estilos para cartas de PPSA por municipio - Solo página de normatividad */
.ppsa-municipalities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.ppsa-municipality-card {
background: var(--color-white);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 1.5rem;
transition: var(--transition);
border-left: 4px solid var(--color-primary);
}
.ppsa-municipality-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.ppsa-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--color-accent-light);
}
.municipality-icon {
font-size: 2.5rem;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-accent)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
min-width: 3rem;
}
.municipality-info h3 {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 0.25rem;
}
.municipality-subtitle {
color: var(--color-gray);
font-size: 0.9rem;
margin: 0;
font-style: italic;
}
.ppsa-content {
margin-bottom: 1.5rem;
background: transparent;
}
.ppsa-details h4 {
color: var(--color-accent);
font-size: 1rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.ppsa-details ul {
list-style: none;
padding: 0;
margin-bottom: 1rem;
}
.ppsa-details li {
padding: 0.25rem 0;
padding-left: 1rem;
position: relative;
font-size: 0.95rem;
color: var(--color-dark);
}
.ppsa-details li::before {
content: "";
position: absolute;
left: 0;
width: 6px;
height: 6px;
background: var(--color-primary);
border-radius: 2px;
top: 8px;
}
/* PPSA highlights and layout */
.ppsa-content {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.ppsa-section {
background: var(--color-white);
padding: 1rem 1.9rem;
border-radius: calc(var(--border-radius) - 2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
border-left: 4px solid rgba(14, 89, 33, 0.06);
}
.ppsa-highlights {
display: flex;
gap: 0.75rem;
margin-top: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
.highlight-item {
background: linear-gradient(180deg, rgba(14, 89, 33, 0.06), transparent 40%);
padding: 0.6rem 0.9rem;
border-radius: 8px;
display: flex;
gap: 0.5rem;
align-items: center;
min-width: 80px;
}
.highlight-number {
font-weight: 800;
color: var(--color-primary);
font-size: 1.2rem;
}
.highlight-label {
font-size: 0.85rem;
color: var(--color-dark);
}
@media (min-width: 720px) {
.ppsa-content {
grid-template-columns: 1fr 320px;
align-items: start;
}
.ppsa-highlights {
flex-direction: column;
gap: 0.8rem;
}
.highlight-item {
min-width: unset;
width: 100%;
justify-content: space-between;
}
}
.ppsa-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
padding: 1rem;
background: var(--color-neutral);
border-radius: var(--border-radius);
}
.ppsa-stats .stat-item {
text-align: center;
}
.ppsa-stats .stat-number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--color-accent);
}
.ppsa-stats .stat-label {
font-size: 0.8rem;
color: var(--color-gray);
margin-top: 0.25rem;
}
.ppsa-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.ppsa-actions .btn {
flex: 1;
min-width: 140px;
}
.ppsa-general-info {
margin-top: 3rem;
}
.ppsa-info-card {
background: var(--color-white);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 2rem;
border: 2px solid var(--color-accent-light);
}
.ppsa-info-card h3 {
color: var(--color-primary);
text-align: center;
margin-bottom: 1.5rem;
font-size: 1.3rem;
}
.objectives-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.objective-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--color-neutral);
border-radius: var(--border-radius);
transition: var(--transition);
}
.objective-item:hover {
background: var(--color-accent-light);
transform: translateX(5px);
}
.objective-icon {
font-size: 1.5rem;
flex-shrink: 0;
text-align: center;
min-width: 2rem;
}
.objective-item span:last-child {
font-size: 0.9rem;
color: var(--color-dark);
line-height: 1.4;
}
/* Responsividad para cartas de PPSA */
@media (max-width: 768px) {
.ppsa-municipalities-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ppsa-header {
flex-direction: column;
text-align: center;
}
.municipality-icon {
align-self: center;
}
.ppsa-actions {
flex-direction: column;
}
.objectives-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.ppsa-municipality-card {
padding: 1.25rem;
}
.ppsa-info-card {
padding: 1.5rem;
}
.ppsa-stats {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}