:root {
    --green-main: #2e8b57;
    --green-light: #4caf50;
    --bg: #f5f7f6;
    --text: #333;
}

* { margin: 0; padding: 0;box-sizing: border-box;}
body {font-family: Arial, sans-serif;background: var(--bg);color: var(--text);}

.nav {display: flex;align-items: center;gap: 30px;}
.nav a {position: relative;text-decoration: none;color: #4b5563;font-size: 15px;font-weight: 500;padding: 6px 0;transition: color 0.25s ease;}
.nav a:hover {color: #16a34a;}
.nav a::after {content: "";position: absolute;left: 0;bottom: -6px;width: 0%;height: 2px;background: #16a34a;border-radius: 2px;transition: width 0.3s ease;}
.nav a:hover::after {width: 100%;}
.nav a.active {color: #16a34a;}
.nav a.active::after {width: 100%;}

.container {width: 90%;max-width: 1200px;margin: auto;}

/* HEADER */
.header {background: #fff;padding: 15px 0;border-bottom: 1px solid #ddd;}
.flex-between {display: flex;justify-content: space-between;align-items: center;}
.logo {color: var(--green-main);font-weight: bold;}
.logo img {height: 90px;width: auto;display: block;}

/* HERO */
.hero {background: linear-gradient(135deg, #2e7d32, #43a047);color: white;padding: 80px 20px 80px;text-align: center;}
.hero-container {max-width: 900px; margin: 0 auto;}
.hero h1 {font-size: 2.5rem;font-weight: 700;margin-bottom: 15px;}
.hero p {font-size: 1.1rem;opacity: 0.9;margin-bottom: 40px;}

.hero-actions {margin-top: 15px;display: flex;justify-content: center;flex-wrap: wrap; gap: 10px;}

.search-box {display: flex;justify-content: center;gap: 10px;flex-wrap: wrap;}
.input-group {display: flex;align-items: center;background: white;border-radius: 12px;padding: 0 15px;width: 100%;max-width: 450px;box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.input-group input {border: none;outline: none; padding: 14px 0;width: 100%;font-size: 1rem;}
.input-group .icon {margin-right: 8px;font-size: 1.1rem;color: #777;}
.search-box button {background: #ffffff;color: #2e7d32;border: none;padding: 14px 22px;border-radius: 12px;font-weight: 600;cursor: pointer; transition: all 0.25s ease;box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.search-box button:hover {background: #e8f5e9;transform: translateY(-2px);}

/* BOTONES RÁPIDOS (chips) */
.quick-actions {margin-top: 15px;display: flex;justify-content: center;gap: 10px;flex-wrap: wrap;}
.qa-btn {padding: 8px 14px;border-radius: 20px;border: none;background: rgba(255,255,255,0.2);color: white;cursor: pointer; font-size: 0.9rem;transition: 0.2s;}
.qa-btn:hover {background: rgba(255,255,255,0.35);}
.qa-btn.active {background: #fff;color: var(--green-main);font-weight: bold;}

.seccion {padding: 40px 0;}
.seccion h2 {font-size: 2rem;margin-bottom: 20px;}
.seccion h3 {margin-bottom: 10px;font-size: 1.2rem;}
.seccion p {margin-bottom:30px;color:#666;font-size: 0.95rem;line-height: 1.4;}

.fdoBlanco {background: #fff;}
.fdoGris{background: #f1f1f1;}
.centrarTexto{text-align: center;}

.grid6 {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 15px;margin-top: 20px;}
.grid3 {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}

.info-card {padding: 25px;border-radius: 12px;box-shadow: 0 4px 15px rgba(0,0,0,0.05);transition: 0.2s;}
.info-icon {font-size: 2.2rem;margin-bottom: 12px;}

.link-edo-mpo {background: #f1f1f1;padding: 15px;border-radius: 10px;text-align: center;transition: 0.2s;display: block;text-decoration: none;color: #333;}
.link-edo-mpo:hover {background: var(--green-light);color: #fff;}

.btn-all {display: inline-block;padding: 10px 18px;background: var(--green-main);color: #fff !important;border-radius: 6px;text-decoration: none;transition: 0.2s;margin-top:20px;}
.btn-all:hover {background: var(--green-light)}

.link-card {text-decoration: none;color: #22c55e;display: block;}
.link-card:hover {text-decoration: underline;color: #16a34a;}
.link-card:active {color: #166534;}

/* TARJETAS */
.card {background: #fff;padding: 15px;border-radius: 10px;text-align: center;transition: 0.2s;}
.card:hover {transform: translateY(-5px);}
.card img {width: 100%;border-radius: 8px;}

/* FOOTER*/
.footer {background: #1f2937;margin-top: 0px;color: #d1d5db;border-top: 1px solid #e5e7eb20;}
.fc-footer-container {width: 90%; max-width: 1200px;margin: auto;padding: 40px 20px;display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 40px;}
.fc-footer-col h3 {font-size: 1.1rem;color: #ffffff;margin-bottom: 15px;}
.fc-footer-col a {display: block; margin-bottom: 8px; text-decoration: none;color: #9ca3af;transition: all 0.2s ease;}
.fc-footer-col a:hover {color: #22c55e;padding-left: 4px;}
.fc-footer-bottom {text-align: center;padding: 15px;color: #9ca3af;border-top: 1px solid #ffffff10;font-size:0.9rem;}

/* BREADCRUMB */
.breadcrumb {max-width: 1100px;margin: 0 auto; padding: 12px 20px; font-size: 14px; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.breadcrumb a {text-decoration: none;color: #16a34a;transition: color 0.2s ease;}
.breadcrumb a:hover {text-decoration: underline;}
.breadcrumb span {margin: 0 6px;}
.breadcrumb .current {color: #374151;font-weight: 500;}

.link-gris {display: inline-block; margin: 10px;padding: 10px 18px; background: #f1f1f1; border-radius: 6px;text-decoration: none;color: #333;}
.link-gris:hover {background: var(--green-light);color: #fff;}

.layout-detalle {display: grid;grid-template-columns: 2fr 1fr;gap: 25px; margin-top: 30px;}

.farmacia-card {display: flex;gap: 15px;background: #fff;padding: 12px;border-radius: 10px;margin-bottom: 15px;box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.farmacia-img img {width: 90px;height: 90px;object-fit: cover;border-radius: 8px;}
.farmacia-info h3 {margin-bottom: 5px;}
.farmacia-info p {font-size: 0.9rem;color: #666;}
.farmacia-actions {margin-top: 8px;}
.btn-call {background: var(--green-main);color: #fff;padding: 6px 10px;border-radius: 6px;text-decoration: none;margin-right: 5px;}
.btn-similar {background: #eee;padding: 6px 10px;border-radius: 6px;text-decoration: none;color: #333;}

/* DERECHA */
.map-box iframe {width: 100%;height: 250px;border-radius: 10px;border: 0;}
.side-box {background: #fff;padding: 15px;border-radius: 10px;margin-top: 15px;}
.side-box h3 {margin-bottom: 10px;}
.side-box ul {list-style: none;}
.side-box li {margin-bottom: 6px;}
.side-box a {text-decoration: none; color: var(--green-main);}

.btnLlamar {padding: 10px 16px;border-radius: 10px;text-decoration: none;font-weight: 600;display: inline-flex;align-items: center;gap: 6px;transition: 0.2s;background: #fff;color: var(--green-main);}
.btnLlamar:hover {transform: translateY(-2px);background: #f1f1f1;}
.btnComoLlegar {padding: 10px 16px;border-radius: 10px;text-decoration: none;font-weight: 600;display: inline-flex;align-items: center;gap: 6px;transition: 0.2s;background: #2E7D32;color: #fff;}
.btnComoLlegar:hover {transform: translateY(-2px);background: #1B5E20;}

.main-img {width:100%;height:auto;object-fit:cover;border-radius:8px;margin-bottom:10px;}
.badge {display: inline-block;padding: 4px 10px;border-radius: 20px;background: #e8f5ee;color: var(--green-main);font-size: 0.85rem;margin-bottom: 10px;}

.card-detalle{background: #fff;padding: 15px;border-radius: 10px;transition: 0.2s;box-shadow: 0 6px 18px rgba(0,0,0,0.06);margin-bottom: 15px;}
.card-detalle h2,
.card-detalle h3 {margin-bottom: 10px;color: #222;}
.card-detalle p {margin-bottom: 8px;color: #555;line-height: 1.5;}

.services-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;margin-top: 10px;}
.service {background: #f5f7f6;padding: 10px;border-radius: 10px;font-size: 0.95rem;transition: 0.2s;display:flex;}
.service:hover {background: #e8f5ee;}

.city-card {background: #ffffff;padding: 20px;border-radius: 12px;text-decoration: none;color: inherit;box-shadow: 0 4px 10px rgba(0,0,0,0.05);transition: all 0.25s ease;text-align: left;}
.city-card h3 {font-size: 20px;margin-bottom: 10px;color: #2c3e50;}
.city-card p {font-size: 14px;color: #555;margin-bottom: 15px;}
.city-card .cta {font-weight: bold;color: #28a745;font-size: 14px;}
.city-card:hover {transform: translateY(-5px);box-shadow: 0 8px 18px rgba(0,0,0,0.08);}
.city-card:hover .cta {text-decoration: underline;}

/* FORMULARIO */
.ctc-form {display: flex;flex-direction: column;}
.ctc-group {margin-bottom: 15px;}
.ctc-label {font-size: 14px;margin-bottom: 5px;display: block; color: #333;}
.ctc-input,
.ctc-textarea {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 6px;font-size: 14px;}
.ctc-input:focus,
.ctc-textarea:focus {border-color: #2e7d32;outline: none;}
.ctc-btn {background-color: #2e7d32;color: white;padding: 12px;border: none;border-radius: 6px;font-size: 16px;cursor: pointer;transition: background 0.3s;}
.ctc-btn:hover {background-color: #256628;}

.menu-toggle {
    display: none;
    font-size: 26px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--green-main);
}

@media (max-width: 768px) {
    .menu-toggle {display: block;}
    .nav {position: absolute;top: 70px;left: 0; width: 100%; background: #fff; flex-direction: column; align-items: center; gap: 15px; padding: 20px 0;display: none; z-index: 1000; box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
    .nav.active {display: flex;}
    .nav a {font-size: 16px;padding: 10px;}
	
    .logo img {height: 60px;}

    .hero {padding: 50px 15px;}
    .hero h1 {font-size: 1.8rem;}
    .hero p {font-size: 1rem; margin-bottom: 25px;}
    .hero-actions {flex-direction: column;gap: 10px;}

    .search-box {flex-direction: column;align-items: stretch;}
    .search-box button {width: 100%;}
    .input-group {max-width: 100%;}

    .quick-actions {gap: 8px;}
    .qa-btn {font-size: 0.8rem;padding: 6px 10px;}

    .seccion {padding: 30px 0;}
    .seccion h2 {font-size: 1.5rem;}

    .grid3 {grid-template-columns: 1fr;}
    .grid6 {grid-template-columns: repeat(2, 1fr);}

    .layout-detalle {grid-template-columns: 1fr;}

    .farmacia-card {flex-direction: column;align-items: flex-start;}
    .farmacia-img img {width: 100%;height: auto;}

    .services-grid {grid-template-columns: 1fr;}

    .fc-footer-container {grid-template-columns: 1fr;gap: 25px;padding: 30px 15px;}

    .map-box iframe {height: 200px;}

    .btnLlamar,
    .btnComoLlegar {width: 100%;justify-content: center;}
}