/*
Theme Name: Dilo Con Detalles (Divi Child)
Theme URI: https://dilocondetalles.cl
Description: Child theme de Divi 5 para dilocondetalles.cl — regalos personalizados sublimados. Aplica la paleta e identidad real del logo (turquesa, blanco, rosa) sobre Divi y WooCommerce, agrega utilidades de marca y endurecimiento de seguridad/rendimiento, sin tocar el core de Divi.
Author: Dilo Con Detalles
Author URI: https://dilocondetalles.cl
Template: Divi
Version: 1.0.0
Text Domain: dilocondetalles-child
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* ============================================================
   1. TOKENS DE MARCA — extraídos directamente del logo real
   (dilo-con-detalles-logo-grande-2.svg: #0097b2, #ffffff, #ffc6d3)
   ============================================================ */

:root {

	/* Turquesa — color principal del logo */
	--dcd-primary: #0097b2;          /* Uso decorativo grande: fondos, íconos, títulos grandes */
	--dcd-primary-strong: #008097;   /* Botones / texto interactivo sobre blanco — AA 4.6:1 */
	--dcd-primary-dark: #00768b;     /* Hover / activo — AA 5.3:1 */
	--dcd-primary-deep: #005362;     /* Acentos profundos, secciones oscuras */
	--dcd-primary-tint: #e6f5f7;     /* Fondo suave de sección */
	--dcd-primary-tint-soft: #f0f9fa;

	/* Rosa — color de los corazones del logo */
	--dcd-accent: #ffc6d3;           /* Uso decorativo: fondos, íconos, badges grandes */
	--dcd-accent-deep: #85676e;      /* Texto rosado con contraste AA 5:1 */
	--dcd-accent-tint: #ffe5eb;

	/* Neutros */
	--dcd-ink: #0c292e;
	--dcd-ink-soft: #627578;
	--dcd-ink-faint: #92a0a2;
	--dcd-paper: #ffffff;
	--dcd-paper-soft: #f6f8f8;
	--dcd-border: #e2e5e6;
	--dcd-border-teal: #d9eff3;

	--dcd-radius-sm: 6px;
	--dcd-radius-md: 12px;
	--dcd-radius-lg: 20px;
	--dcd-shadow-soft: 0 10px 30px rgba(12, 41, 46, 0.08);
	--dcd-shadow-card: 0 6px 18px rgba(12, 41, 46, 0.06);
}

/* ============================================================
   2. BASE — tipografía y color general del sitio
   Los tipos de letra se seleccionan desde el Personalizador de Divi
   (Divi > Theme Customizer > General Settings > Typography), ver
   readme.txt para las fuentes recomendadas. Aquí solo se fija color.
   ============================================================ */

/* El color base se define SOLO en body y se hereda hacia abajo.
   Importante: no agregar aquí p, li, .et_pb_text_inner ni .et_pb_module h1…
   porque una regla directa sobre esos elementos le gana por cascada al
   color que Divi aplica a nivel de módulo, y los selectores de color del
   builder (Design > Text > Text Color) dejarían de funcionar. */
body {
	color: var(--dcd-ink);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--dcd-ink);
}

a {
	color: var(--dcd-primary-strong);
	transition: color 0.2s ease;
}
a:hover {
	color: var(--dcd-primary-dark);
}

/* Foco de teclado visible y consistente (accesibilidad). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
	outline: 2px solid var(--dcd-primary-deep);
	outline-offset: 2px;
}

::selection {
	background: var(--dcd-accent);
	color: var(--dcd-ink);
}

/* ============================================================
   3. BOTONES — módulo Button, Blurb "more button", CTA, WooCommerce
   ============================================================ */

.et_pb_button,
.et_pb_promo_button,
.et_pb_more_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	background: var(--dcd-primary-strong) !important;
	border: none !important;
	color: #ffffff !important;
	border-radius: var(--dcd-radius-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	padding: 0.85em 2em !important;
	transition: background 0.2s ease, transform 0.15s ease !important;
}

.et_pb_button:hover,
.et_pb_promo_button:hover,
.et_pb_more_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--dcd-primary-dark) !important;
	color: #ffffff !important;
}

/* Variante "outline" — asignar la clase dcd-btn-outline en el módulo Button
   (campo "CSS ID & Classes") para un botón secundario, ej. sobre fondo blanco. */
.dcd-btn-outline.et_pb_button {
	background: transparent !important;
	border: 2px solid var(--dcd-primary-strong) !important;
	color: var(--dcd-primary-strong) !important;
}
.dcd-btn-outline.et_pb_button:hover {
	background: var(--dcd-primary-strong) !important;
	color: #ffffff !important;
}

/* Variante para usar sobre fondos oscuros/turquesa (botón blanco). */
.dcd-btn-on-dark.et_pb_button {
	background: #ffffff !important;
	color: var(--dcd-primary-deep) !important;
}
.dcd-btn-on-dark.et_pb_button:hover {
	background: var(--dcd-accent-tint) !important;
}

/* ============================================================
   4. UTILIDADES DE MARCA
   Clases para pegar en "CSS ID & Classes" de cualquier módulo Divi.
   ============================================================ */

/* Insignia tipo sello — eco de la forma circular del logo. Úsala en un
   módulo Text corto ("Hecho a mano", "100% personalizable", etc). */
.dcd-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--dcd-primary-deep);
	background: var(--dcd-primary-tint);
	border: 1px solid var(--dcd-border-teal);
	border-radius: 999px;
	padding: 6px 18px;
}
.dcd-badge::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='%230097b2' d='M16 29S0 19.3 0 9.5C0 4.3 4.1 0 9.1 0c2.8 0 5.3 1.3 6.9 3.4C17.6 1.3 20.1 0 22.9 0 27.9 0 32 4.3 32 9.5 32 19.3 16 29 16 29Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.dcd-badge.dcd-badge--pink {
	color: var(--dcd-accent-deep);
	background: var(--dcd-accent-tint);
	border-color: #ffd3de;
}
.dcd-badge.dcd-badge--pink::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='%23ff8fa3' d='M16 29S0 19.3 0 9.5C0 4.3 4.1 0 9.1 0c2.8 0 5.3 1.3 6.9 3.4C17.6 1.3 20.1 0 22.9 0 27.9 0 32 4.3 32 9.5 32 19.3 16 29 16 29Z'/%3E%3C/svg%3E");
}
.dcd-badge.dcd-badge--on-dark {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.35);
}
.dcd-badge.dcd-badge--on-dark::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='%23ffffff' d='M16 29S0 19.3 0 9.5C0 4.3 4.1 0 9.1 0c2.8 0 5.3 1.3 6.9 3.4C17.6 1.3 20.1 0 22.9 0 27.9 0 32 4.3 32 9.5 32 19.3 16 29 16 29Z'/%3E%3C/svg%3E");
}

/* Divisor con corazón — para separar secciones sin usar una simple línea.
   Asígnala a un módulo Divider o a un Text vacío centrado. */
.dcd-heart-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-block: 8px;
}
.dcd-heart-divider::before,
.dcd-heart-divider::after {
	content: "";
	height: 1px;
	width: 64px;
	background: var(--dcd-border-teal);
}
.dcd-heart-divider .dcd-heart-icon {
	width: 16px;
	height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='%230097b2' d='M16 29S0 19.3 0 9.5C0 4.3 4.1 0 9.1 0c2.8 0 5.3 1.3 6.9 3.4C17.6 1.3 20.1 0 22.9 0 27.9 0 32 4.3 32 9.5 32 19.3 16 29 16 29Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Título con subrayado tipo cinta — asignar dcd-heading-ribbon al módulo Text
   que contenga el <h2>. */
.dcd-heading-ribbon {
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}
.dcd-heading-ribbon::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 999px;
	background: var(--dcd-accent);
}

/* Tarjeta suave redondeada — envolver un Blurb/CTA con esta clase para la
   estética "boutique" (esquinas grandes, sombra suave). */
.dcd-card {
	background: #ffffff;
	border-radius: var(--dcd-radius-lg);
	box-shadow: var(--dcd-shadow-card);
	padding: 8px;
}

/* Sección con fondo turquesa suave — asignar a un módulo Section. */
.dcd-section-tint {
	background: var(--dcd-primary-tint) !important;
}
.dcd-section-tint-pink {
	background: var(--dcd-accent-tint) !important;
}

/* ============================================================
   5. MÓDULOS DIVI HABITUALES — Blurb, CTA, Testimonial
   ============================================================ */

.et_pb_blurb_content .et_pb_module_header {
	color: var(--dcd-ink);
}

.et_pb_main_blurb_image .et-pb-icon,
.et_pb_blurb .et-pb-icon {
	color: var(--dcd-primary) !important;
}

.et_pb_cta {
	background: var(--dcd-primary) !important;
	border-radius: var(--dcd-radius-lg);
}
.et_pb_cta h2, .et_pb_cta .et_pb_module_header {
	color: #ffffff !important;
}
.et_pb_cta .et_pb_cta_content, .et_pb_cta p {
	color: rgba(255,255,255,0.9) !important;
}
.et_pb_cta .et_pb_button {
	background: #ffffff !important;
	color: var(--dcd-primary-deep) !important;
}
.et_pb_cta .et_pb_button:hover {
	background: var(--dcd-accent-tint) !important;
}

.et_pb_testimonial {
	background: #ffffff;
	border-radius: var(--dcd-radius-md);
	box-shadow: var(--dcd-shadow-card);
}
.et_pb_testimonial_description_wrapper blockquote {
	border: none;
	color: var(--dcd-ink);
}
.et_pb_testimonial_meta, .et_pb_testimonial_meta a {
	color: var(--dcd-primary-strong);
}
.et-pb-icon.et_pb_star {
	color: var(--dcd-accent-deep) !important;
}

/* Formularios de contacto (Contact Form module) */
.et_pb_contact_form_container input,
.et_pb_contact_form_container textarea,
.et_pb_contact_form_container select {
	border-radius: var(--dcd-radius-sm) !important;
	border: 1px solid var(--dcd-border) !important;
}
.et_pb_contact_form_container input:focus,
.et_pb_contact_form_container textarea:focus {
	border-color: var(--dcd-primary) !important;
}
.et-pb-contact-message.et-pb-contact-success-message {
	color: var(--dcd-primary-deep);
	border-color: var(--dcd-primary);
}

/* ============================================================
   6. HEADER / MENÚ — selectores clásicos de Divi (header/menú global)
   ============================================================ */

#main-header,
.et-fixed-header,
#top-header {
	background-color: #ffffff;
}

#top-menu li a,
.et_pb_menu__menu li a {
	color: var(--dcd-ink);
}

#top-menu li a:hover,
#top-menu li.current-menu-item > a,
.et_pb_menu__menu li a:hover {
	color: var(--dcd-primary-strong);
}

.et-social-icons a {
	color: var(--dcd-primary) !important;
}

/* Ícono / contador del mini carrito, si se usa el módulo WooCommerce Cart Notice */
.et_pb_wc_cart_notice .cart-contents,
.woocommerce-mini-cart__total {
	color: var(--dcd-primary-deep);
}

/* ============================================================
   7. WOOCOMMERCE — grilla de productos, ficha, precios
   ============================================================ */

.woocommerce ul.products li.product,
.et_pb_shop .products li.product {
	border-radius: var(--dcd-radius-md);
	transition: transform 0.2s ease;
}

.woocommerce span.onsale,
.et_pb_shop span.onsale {
	background: var(--dcd-accent-deep) !important;
	border-radius: 999px;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--dcd-primary-strong);
	font-weight: 700;
}

.woocommerce ul.products li.product .price del {
	color: var(--dcd-ink-faint);
	opacity: 1;
}
.woocommerce ul.products li.product .price ins {
	color: var(--dcd-primary-dark);
	text-decoration: none;
}

.woocommerce .star-rating span::before,
.woocommerce .comment-form-rating .stars a::after {
	color: var(--dcd-accent-deep);
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--dcd-primary) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--dcd-primary) !important;
}

.woocommerce-error {
	border-top-color: var(--dcd-accent-deep) !important;
}
.woocommerce-error::before {
	color: var(--dcd-accent-deep) !important;
}

/* Badge "Personalizable": crea la etiqueta de producto (product_tag) llamada
   "personalizable" y usa este selector para resaltarla en el listado. */
.woocommerce span.tag-personalizable,
.term-personalizable {
	background: var(--dcd-accent-tint);
	color: var(--dcd-accent-deep);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
}

/* Mi cuenta */
.woocommerce-MyAccount-navigation ul li a {
	border-radius: 999px;
	background: var(--dcd-paper-soft);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--dcd-primary);
	color: #ffffff;
}

/* ============================================================
   8. FOOTER
   ============================================================ */

#main-footer,
.et-l--footer {
	background-color: var(--dcd-ink);
	color: rgba(255,255,255,0.82);
}
#main-footer a, .et-l--footer a {
	color: rgba(255,255,255,0.82);
}
#main-footer a:hover, .et-l--footer a:hover {
	color: #ffffff;
}
#footer-bottom, .et-l--footer .et_pb_row_1 {
	border-top: 1px solid rgba(255,255,255,0.12);
}

/* ============================================================
   10. ACCORDION (Preguntas Frecuentes) Y HOVER DE BLURBS
   ============================================================ */

.et_pb_accordion .et_pb_toggle {
	border-radius: var(--dcd-radius-md) !important;
	border: 1px solid var(--dcd-border) !important;
	margin-bottom: 10px !important;
	overflow: hidden;
}
.et_pb_accordion .et_pb_toggle_title {
	padding: 16px 20px !important;
}
.et_pb_accordion .et_pb_toggle_content {
	padding: 0 20px 18px !important;
	color: var(--dcd-ink-soft);
}
.et_pb_accordion .et_pb_toggle_open {
	border-color: var(--dcd-primary) !important;
}

.et_pb_blurb {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.et_pb_blurb:hover {
	transform: translateY(-3px);
	box-shadow: var(--dcd-shadow-soft) !important;
}

/* Formularios: asegura que los campos se vean bien en 2 columnas en desktop
   y se apilen automáticamente en móvil (comportamiento nativo de Divi). */
.et_pb_contact_form_container .et_pb_contact_field {
	margin-bottom: 16px !important;
}


/* ============================================================
   11. RESPETO A PREFERENCIAS DE MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
	.et_pb_blurb:hover {
		transform: none;
	}
}

/* ============================================================
   12. SOPORTE DEL LAYOUT DE PORTADA (clases usadas por los JSON
   de la Divi Library — no eliminar mientras se usen esos layouts)
   ============================================================ */

/* Tipografías del diseño (cargadas vía functions.php) */
h1, h2, h3, h4,
.et_pb_module_header,
.et_pb_slide_title {
	font-family: 'Poppins', -apple-system, sans-serif;
}

/* Acento manuscrito del logo — usar en spans dentro de módulos Text */
.dcd-script {
	font-family: 'Alex Brush', cursive !important;
	font-weight: 400;
	line-height: 1.1;
}

/* Tarjeta de categoría con texto sobre la imagen (como en el preview).
   Se asigna la clase dcd-cat-card en el campo CSS Class del Blurb. */
.dcd-cat-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--dcd-radius-md);
	box-shadow: var(--dcd-shadow-card);
}
.dcd-cat-card .et_pb_main_blurb_image {
	margin-bottom: 0;
	line-height: 0;
}
.dcd-cat-card .et_pb_main_blurb_image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	transition: transform .45s ease;
}
.dcd-cat-card:hover .et_pb_main_blurb_image img {
	transform: scale(1.05);
}
.dcd-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5,40,48,.62) 0%, transparent 52%);
	pointer-events: none;
	z-index: 1;
}
.dcd-cat-card .et_pb_blurb_container {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 12px;
	z-index: 2;
	text-align: left;
	padding: 0;
}
.dcd-cat-card .et_pb_module_header,
.dcd-cat-card .et_pb_module_header a {
	color: #ffffff !important;
	font-size: 19px !important;
	margin-bottom: 2px;
}
.dcd-cat-card .et_pb_blurb_description {
	color: rgba(255,255,255,.85) !important;
	font-size: 13px;
}

/* CTA final como caja redondeada con degradado (como en el preview) */
.dcd-cta-final.et_pb_cta {
	background: linear-gradient(140deg, var(--dcd-primary) 0%, var(--dcd-primary-deep) 100%) !important;
	border-radius: 24px;
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}

/* Número de paso circular (Cómo Funciona) */
.dcd-step .et_pb_module_header::first-letter {
	color: var(--dcd-primary);
}