/*
Theme Name: El Doctor
Theme URI: https://insumosmedicoseldoctor.com
Author: Blue Nova Consulting
Author URI: https://bluenova.com.ec
Description: Tema a medida para Insumos Médicos El Doctor. Diseño general basado en la plantilla Doctor (Envato) y la página de tienda basada en MedShop (Envato), integrado con WooCommerce.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eldoctor
Tags: e-commerce, medical, custom-menu, featured-images, translation-ready
*/

/* =============================================================
   El Doctor — capa de marca
   -------------------------------------------------------------
   Este archivo NO contiene el layout de la plantilla: eso vive en
   assets/css/doctor-theme.css (style.css original de Doctor) y en
   assets/css/color-schemes/eldoctor.css (paleta de marca).
   Aquí solo van los ajustes propios del sitio.

   Paleta (verificada WCAG 2.1 AA):
     #97D33D  verde del logo  — solo fondo/acento, texto oscuro encima
     #527D19  CTA             — 4.88:1 con texto blanco   ✓ AA
     #456A15  hover / links   — 6.31:1 sobre blanco       ✓ AAA
   ============================================================= */

:root {
	--eld-green:      #97D33D;
	--eld-green-btn:  #527D19;
	--eld-green-dark: #456A15;
	--eld-ink:        #1F2A16;
	--eld-muted:      #6E7A66;
	--eld-border:     #e4e9de;
	--eld-bg-soft:    #F4F7F0;
}

/* -------------------------------------------------------------
   Accesibilidad
   ------------------------------------------------------------- */

/* Salto al contenido para teclado y lectores de pantalla */
.eld-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 22px;
	background: #fff;
	color: var(--eld-green-dark);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
.eld-skip-link:focus {
	left: 12px;
	top: 12px;
}

/* Texto solo para lectores de pantalla (equivalente a .screen-reader-text) */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	margin: 0; padding: 10px 18px;
	clip: auto;
	white-space: normal;
}

/* La plantilla trae outline:0 en todos los <a>; lo devolvemos para teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--eld-green-dark) !important;
	outline-offset: 2px;
}

/* -------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------- */

/* Logo real en lugar del texto "Doctor" de la plantilla */
.header_s .navbar-brand.eld-logo {
	display: flex;
	align-items: center;
	height: auto;
	padding: 8px 0;
}
.header_s .navbar-brand.eld-logo img {
	display: block;
	width: auto;
	max-height: 62px;
}
@media (max-width: 767px) {
	.header_s .navbar-brand.eld-logo img { max-height: 44px; }
}

/* La cabecera lleva dos logos: uno en la barra superior (.mobile-hide) y otro
   dentro del menú (.desktop-hide), y la plantilla oculta cada uno en su
   tamaño. La regla de arriba tiene más especificidad que las suyas, así que
   anulaba el display:none y el logo salía duplicado. Se reponen ambos
   ocultamientos con la especificidad que hace falta. */
@media (min-width: 992px) {
	.header_s .navbar-brand.eld-logo.desktop-hide { display: none; }
}
@media (max-width: 991px) {
	.header_s .navbar-brand.eld-logo.mobile-hide { display: none; }
}

/* Nombre del sitio como texto, si aún no se cargó un logo */
.header_s .navbar-brand.eld-logo .eld-logo-text {
	color: var(--eld-green-dark);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Barra superior: teléfono + accesos de la tienda */
.header_s .default-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.header_s .eld-top-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}
.header_s .eld-top-actions a {
	color: var(--eld-ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color .25s ease;
}
.header_s .eld-top-actions a:hover,
.header_s .eld-top-actions a:focus { color: var(--eld-green-dark); }
.header_s .eld-top-actions i { margin-right: 6px; }

/* Contador del carrito */
.eld-cart-link { position: relative; }
.eld-cart-count {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--eld-green-btn);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
}

/* -------------------------------------------------------------
   Hero de portada (reemplaza a Slider Revolution con Slick)
   ------------------------------------------------------------- */

.eld-hero { position: relative; overflow: hidden; background: var(--eld-bg-soft); }
.eld-hero .slick-list,
.eld-hero .slick-track { height: 100%; }

.eld-hero__slide {
	position: relative;
	display: flex !important;
	align-items: center;
	min-height: 720px;
	padding: 150px 0 80px;
	background-color: #dfe6d6;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Sin foto de fondo el hero se vería vacío, así que la diapositiva lleva
   un degradado de marca de respaldo. En cuanto se cargue una imagen en
   Personalizar → Carrusel de portada, la foto pasa por encima. */
.eld-hero__slide:not([style*="background-image"]) {
	background-image:
		radial-gradient(circle at 78% 22%, rgba(151, 211, 61, .38) 0%, transparent 52%),
		linear-gradient(125deg, #f2f6ec 0%, #dfe9d3 55%, #cfdec0 100%);
}

/* Velo que garantiza contraste del texto sobre cualquier foto */
.eld-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .45) 48%, rgba(255, 255, 255, 0) 80%);
}
.eld-hero__inner { position: relative; z-index: 2; max-width: 640px; }

.eld-hero__eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 18px;
	border-radius: 20px;
	background: var(--eld-green);
	color: var(--eld-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Caja del titular. La plantilla la resuelve con un PNG recortado
   (slide-txt-bg.png); aquí se reproduce la misma geometría con clip-path,
   que escala a cualquier ancho y se puede recolorear. */
.eld-hero__box {
	position: relative;
	max-width: 620px;
	margin-bottom: 26px;
	padding: 42px 46px 46px;
	background: rgba(255, 255, 255, .93);
	clip-path: polygon(0% 0%, 100% 10.4%, 100% 89.1%, 0% 99.5%);
}
@supports not (clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%)) {
	.eld-hero__box { clip-path: none; border-radius: 4px; }
}

.eld-hero__title {
	margin: 0;
	color: var(--eld-ink);
	font-family: 'Lato', sans-serif;
	font-size: 46px;
	font-weight: 300;
	line-height: 1.16;
	text-transform: uppercase;
}
.eld-hero__title strong { font-weight: 800; }
.eld-hero__text {
	margin: 16px 0 0;
	color: #55604d;
	font-size: 16px;
	line-height: 1.7;
}

/* Botón con la misma inclinación del PNG original (slide-btn-bg.png) y la
   placa circular de icono que lo acompaña en la plantilla. */
.eld-hero__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 62px;
	padding: 0 40px 0 28px;
	background: var(--eld-green-btn);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .05em;
	text-decoration: none;
	text-transform: uppercase;
	clip-path: polygon(0% 0%, 100% 17.4%, 100% 81.4%, 0% 98.8%);
	transition: background .25s ease;
}
.eld-hero__cta::before {
	content: "\f0f1"; /* estetoscopio de FontAwesome */
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 3px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	font-family: FontAwesome;
	font-size: 16px;
	font-weight: 400;
}
.eld-hero__cta:hover,
.eld-hero__cta:focus { background: var(--eld-green-dark); color: #fff !important; }

.eld-hero__cta--ghost {
	margin-left: 12px;
	padding: 0 34px;
	background: rgba(255, 255, 255, .92);
	color: var(--eld-green-dark) !important;
	box-shadow: inset 0 0 0 2px var(--eld-green-btn);
}
.eld-hero__cta--ghost::before {
	content: "\f232"; /* WhatsApp */
	border-color: rgba(82, 125, 25, .45);
}
.eld-hero__cta--ghost:hover,
.eld-hero__cta--ghost:focus { background: var(--eld-green-btn); color: #fff !important; }
.eld-hero__cta--ghost:hover::before,
.eld-hero__cta--ghost:focus::before { border-color: rgba(255, 255, 255, .55); }

/* Flechas y puntos del carrusel */
.eld-hero .slick-dots {
	position: absolute;
	bottom: 26px;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.eld-hero .slick-dots li { display: inline-block; margin: 0 5px; }
.eld-hero .slick-dots li button {
	width: 12px; height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(31, 42, 22, .28);
	color: transparent;
	font-size: 0;
	cursor: pointer;
	transition: background .25s ease;
}
.eld-hero .slick-dots li.slick-active button { background: var(--eld-green-btn); }

@media (max-width: 991px) {
	.eld-hero__slide  { min-height: 560px; padding: 120px 0 70px; }
	.eld-hero__title  { font-size: 34px; }
	.eld-hero__box    { padding: 32px 34px 36px; }
	.eld-hero__slide::before {
		background: linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .8) 60%, rgba(255, 255, 255, .55) 100%);
	}
}
@media (max-width: 575px) {
	.eld-hero__slide { min-height: 480px; padding: 100px 0 60px; }
	.eld-hero__inner { max-width: 100%; }
	.eld-hero__box   { padding: 26px 24px 30px; clip-path: none; border-radius: 4px; }
	.eld-hero__title { font-size: 26px; }
	.eld-hero__text  { font-size: 15px; }
	.eld-hero__cta   { min-height: 56px; padding: 0 26px 0 20px; font-size: 13px; clip-path: none; }
	.eld-hero__cta::before { width: 32px; height: 32px; font-size: 14px; }
	.eld-hero__cta--ghost { margin: 12px 0 0; }
}

/* -------------------------------------------------------------
   Categorías destacadas en portada
   ------------------------------------------------------------- */

.eld-cats { padding: 70px 0; }
.eld-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 991px) { .eld-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .eld-cats__grid { grid-template-columns: 1fr; } }

.eld-cat-card {
	display: block;
	padding: 28px 22px;
	border: 1px solid var(--eld-border);
	border-radius: 8px;
	background: #fff;
	color: var(--eld-ink);
	text-align: center;
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.eld-cat-card:hover,
.eld-cat-card:focus {
	border-color: var(--eld-green);
	box-shadow: 0 10px 26px rgba(31, 42, 22, .10);
	color: var(--eld-ink);
	text-decoration: none;
	transform: translateY(-4px);
}
.eld-cat-card__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	margin-bottom: 16px;
}
.eld-cat-card__img img { max-height: 100%; width: auto; object-fit: contain; }
.eld-cat-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px; height: 74px;
	border-radius: 50%;
	background: var(--eld-bg-soft);
	color: var(--eld-green-dark);
	font-size: 30px;
}
.eld-cat-card__name {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}
.eld-cat-card__count { color: var(--eld-muted); font-size: 13px; }

/* -------------------------------------------------------------
   Franja de confianza / servicio
   ------------------------------------------------------------- */

.eld-usp { padding: 42px 0; background: var(--eld-bg-soft); }
.eld-usp__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
}
@media (max-width: 991px) { .eld-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .eld-usp__grid { grid-template-columns: 1fr; } }

.eld-usp__item { display: flex; align-items: flex-start; gap: 14px; }
.eld-usp__item i {
	flex: 0 0 auto;
	color: var(--eld-green-dark);
	font-size: 28px;
	line-height: 1.2;
}
.eld-usp__item h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--eld-ink); }
.eld-usp__item p  { margin: 0; color: var(--eld-muted); font-size: 13px; line-height: 1.6; }

/* -------------------------------------------------------------
   Formularios propios del tema (contacto / consultas)
   ------------------------------------------------------------- */

.eld-form .form-group { margin-bottom: 16px; }
.eld-form .form-control {
	height: 46px;
	border: 1px solid var(--eld-border);
	border-radius: 3px;
	box-shadow: none;
	font-size: 14px;
}
.eld-form textarea.form-control { height: auto; }
.eld-form .form-control:focus {
	border-color: var(--eld-green-btn);
	box-shadow: 0 0 0 3px rgba(82, 125, 25, .15);
}
.eld-form button[type="submit"] {
	padding: 13px 34px;
	border: 0;
	border-radius: 3px;
	background: var(--eld-green-btn);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .25s ease;
}
.eld-form button[type="submit"]:hover:not(:disabled) { background: var(--eld-green-dark); }
.eld-form button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }

.eld-form-msg { margin-top: 14px; padding: 12px 16px; border-radius: 4px; font-size: 14px; display: none; }
.eld-form-msg.is-visible { display: block; }
.eld-form-msg--ok    { background: var(--eld-bg-soft); border-left: 4px solid var(--eld-green-btn); color: var(--eld-ink); }
.eld-form-msg--error { background: #FDECEA; border-left: 4px solid #B3261E; color: #7A1C16; }

/* Campo trampa antispam: oculto para personas, visible para bots */
.eld-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------
   Pie de página
   ------------------------------------------------------------- */

.footer-main .widget-title { color: #fff; }
.footer-main .eld-footer-logo img { max-height: 58px; width: auto; margin-bottom: 18px; }
.footer-main .eld-payment-note {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 13px;
	line-height: 1.7;
}

/* -------------------------------------------------------------
   Banner de página interna
   ------------------------------------------------------------- */

.eld-page-banner {
	padding: 74px 0;
	background: var(--eld-bg-soft) center/cover no-repeat;
	text-align: center;
}
.eld-page-banner h1 {
	margin: 0 0 10px;
	color: var(--eld-ink);
	font-size: 38px;
	font-weight: 700;
	text-transform: uppercase;
}
.eld-page-banner .breadcrumb {
	display: inline-block;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 14px;
}
.eld-page-banner .breadcrumb a { color: var(--eld-green-dark); }
.eld-page-banner .breadcrumb .sep { margin: 0 8px; color: var(--eld-muted); }
@media (max-width: 767px) { .eld-page-banner { padding: 48px 0; } .eld-page-banner h1 { font-size: 27px; } }

/* -------------------------------------------------------------
   Contenido de páginas y entradas
   ------------------------------------------------------------- */

.eld-content { padding: 64px 0; }
.eld-content h2 { font-size: 28px; }
.eld-content h3 { font-size: 22px; }
.eld-content h2,
.eld-content h3,
.eld-content h4 { margin: 32px 0 14px; color: var(--eld-ink); font-weight: 700; }
.eld-content p,
.eld-content li { color: #4a5344; font-size: 15px; line-height: 1.85; }
.eld-content ul,
.eld-content ol { margin: 0 0 18px; padding-left: 22px; }
.eld-content li { margin-bottom: 8px; }
.eld-content a { color: var(--eld-green-dark); text-decoration: underline; }
.eld-content img { height: auto; border-radius: 6px; }
.eld-content table { width: 100%; margin-bottom: 22px; border-collapse: collapse; }
.eld-content th,
.eld-content td { padding: 11px 14px; border: 1px solid var(--eld-border); font-size: 14px; text-align: left; }
.eld-content th { background: var(--eld-bg-soft); font-weight: 700; color: var(--eld-ink); }

/* Tablas anchas (tarifas de envío, cuentas bancarias) con scroll propio */
.eld-table-scroll { overflow-x: auto; margin-bottom: 22px; }
.eld-table-scroll table { margin-bottom: 0; }

/* -------------------------------------------------------------
   Botón flotante de WhatsApp
   ------------------------------------------------------------- */

.eld-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff !important;
	font-size: 28px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: transform .25s ease;
}
.eld-wa:hover,
.eld-wa:focus { transform: scale(1.08); color: #fff; }
@media print { .eld-wa { display: none; } }

/* -------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------- */

.eld-section-pad { padding: 70px 0; }
@media (max-width: 767px) { .eld-section-pad, .eld-cats, .eld-content { padding: 44px 0; } }

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}