/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =====================================================================
   RTPH · Recupera Tu Pareja Hoy
   Capa DECORATIVA unicamente. Todo el layout (columnas, anchos,
   wrapping, alineaciones) es Flexbox NATIVO de Elementor.
   Paleta y tipografias segun el prompt maestro.
   Los adornos dorados NO van por CSS: son widgets nativos de Elementor.
   ===================================================================== */

:root {
	--rtph-borgona: #8B0000;
	--rtph-negro:   #0A0003;
	--rtph-vino:    #290006;
	--rtph-rojo:    #B50016;
	--rtph-oro:     #D4AF37;
	--rtph-oro-luz: #F5D77A;
	--rtph-marfil:  #F5E9D5;
	--rtph-blanco:  #FFF8F0;
	--rtph-wa:      #009D28;
	--rtph-wa-d:    #006B1A;
	--rtph-call:    #D60010;
	--rtph-soft:    #E4D6C4;
	--rtph-serif:   "Cinzel", Georgia, "Times New Roman", serif;
	--rtph-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rtph-romantic:"Cormorant Garamond", Georgia, serif;
}

/* --- 0. Fondo global: degradado 135deg + focos de luz de vela ------- */
body.home {
	background-color: var(--rtph-negro);
	background-image:
		radial-gradient(1000px 620px at 88% 3%, rgba(181, 0, 22, .18), transparent 62%),
		radial-gradient(760px 560px at 4% 45%, rgba(139, 0, 0, .14), transparent 66%),
		radial-gradient(900px 700px at 94% 88%, rgba(101, 0, 11, .16), transparent 64%),
		linear-gradient(135deg, #0A0003 0%, #240005 52%, #3E0007 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	color: var(--rtph-marfil);
	font-family: var(--rtph-sans);
}

body.home h1, body.home h2, body.home h3,
body.home h4, body.home h5, body.home h6,
body.home .elementor-heading-title { font-family: var(--rtph-serif); }

/* --- 1. Titulos con degradado dorado ------------------------------- */
.rtph-gold,
.elementor .rtph-gold,
.elementor h1.rtph-gold,
.elementor h2.rtph-gold,
body.home .elementor .rtph-gold,
body.home .elementor .rtph-gold * {
	color: var(--rtph-oro) !important;
	background-image: linear-gradient(180deg, #F7E3A2 0%, #D4AF37 46%, #A9760A 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Marfil plano (manda sobre lo anterior) */
body.home .elementor .rtph-cream,
body.home .elementor .rtph-cream * {
	color: var(--rtph-marfil) !important;
	background-image: none !important;
	-webkit-text-fill-color: var(--rtph-marfil) !important;
}

/* El tema aplica color directo a h1-h6; dentro de widgets de texto
   devolvemos la herencia para que mande el control del widget. */
body.home .elementor-widget-text-editor h1,
body.home .elementor-widget-text-editor h2,
body.home .elementor-widget-text-editor h3,
body.home .elementor-widget-text-editor h4,
body.home .elementor-widget-text-editor p { color: inherit; }

/* Titulos semanticos dentro de text-editor: sin estilos del tema */
body.home .rtph-hero-title,
body.home .rtph-sec-title {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* --- 2. ADORNOS: AHORA SON ELEMENTOS NATIVOS ------------------------ */
/* Los floreados dorados (adorno_01.png / adorno_02.png) se colocan con
   widgets de Elementor (Imagen o Divisor con imagen), editables y
   borrables desde el panel. No hay adornos por CSS a proposito.      */

/* --- 3. HERO --------------------------------------------------------- */
body.home #hero { text-shadow: 0 2px 20px rgba(0, 0, 0, .55); }
body.home #hero .elementor-widget-text-editor p,
body.home #hero .elementor-widget-heading .elementor-heading-title { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }

/* CTA del hero: halo verde */
body.home .rtph-btn-wa .elementor-button {
	box-shadow:
		0 12px 32px rgba(0, 157, 40, .38),
		inset 0 0 0 1px rgba(190, 255, 210, .35);
}
body.home .rtph-btn-wa .elementor-button:hover,
body.home .rtph-btn-wa .elementor-button:focus {
	box-shadow:
		0 16px 40px rgba(0, 157, 40, .5),
		inset 0 0 0 1px rgba(210, 255, 225, .55);
}
/* Movil: velo VERTICAL para que el texto se lea sobre la foto.
   El overlay de Elementor se pinta en el ::before del contenedor. */
@media (max-width: 767px) {
	body.home #hero::before {
		background-image: linear-gradient(
			180deg,
			rgba(6, 0, 2, .80) 0%,
			rgba(6, 0, 2, .34) 44%,
			rgba(6, 0, 2, .90) 100%
		) !important;
	}
}

/* --- 4. Tarjetas de servicio ---------------------------------------- */
body.home .rtph-card {
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body.home .rtph-card:hover,
body.home .rtph-card:focus-within {
	transform: translateY(-5px);
	border-color: var(--rtph-oro) !important;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 55, .35);
}

/* --- 5. Candado de la seccion Discrecion ---------------------------- */
body.home .rtph-candado img {
	filter: drop-shadow(0 8px 22px rgba(212, 175, 55, .38));
}
body.home .rtph-disc .elementor-icon-box-icon { display: none !important; }

/* --- 6. Avatar de testimonios (solo el circulo) --------------------- */
/* El TAMANO ya no se fuerza por CSS: se controla desde el panel. Los
   tres contenedores ya tienen 72px nativos. Aqui queda solo el circulo,
   el borde y la sombra, que se borraran cuando los pongas en Elementor:
   Estilo > Radio de borde 50% + Borde 2px + Sombra de caja.            */
body.home .rtph-avatar {
	border-radius: 50% !important;
	border: 2px solid rgba(212, 175, 55, .75);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}

/* --- 7. FAQ: acordeon tipo tarjeta ---------------------------------- */
body.home .elementor-toggle .elementor-toggle-item {
	margin-bottom: 14px;
	border: 1px solid rgba(212, 175, 55, .45);
	border-radius: 12px;
	overflow: hidden;
	background-color: rgba(10, 0, 3, .55);
	transition: border-color .3s ease;
}
body.home .elementor-toggle .elementor-toggle-item:hover { border-color: rgba(212, 175, 55, .8); }
body.home .elementor-toggle .elementor-tab-title {
	position: relative;
	border: 0 !important;
	background-color: transparent;
}
body.home .elementor-toggle .elementor-tab-title.elementor-active { background-color: rgba(41, 0, 6, .92); }
body.home .elementor-toggle .elementor-tab-content {
	border: 0 !important;
	border-top: 1px solid rgba(212, 175, 55, .28) !important;
	background-color: rgba(41, 0, 6, .86) !important;
}

/* Icono + / - dentro de un circulo dorado, alineado a la derecha.
   Elementor pinta el icono como SVG en linea (.e-font-icon-svg). */
body.home .elementor-toggle .elementor-toggle-icon {
	position: absolute;
	right: 22px;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	float: none;
	border: 1px solid rgba(212, 175, 55, .7);
	border-radius: 50%;
	background-color: rgba(212, 175, 55, .10);
}
body.home .elementor-toggle .elementor-toggle-icon svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	color: var(--rtph-oro);
}
body.home .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon {
	background-color: rgba(212, 175, 55, .22);
}

/* --- 9. Barra fija de conversion (SOLO movil, SOLO WhatsApp) -------- */
/* En escritorio NO existe barra: el CTA vive en el hero y el footer. */
@media (min-width: 768px) {
	body .elementor .rtph-cta-bar { display: none !important; }
}

@media (max-width: 767px) {
	body .elementor .rtph-cta-bar {
		position: fixed !important;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 999;
		justify-content: center !important;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 -10px 34px rgba(0, 0, 0, .55);
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
		padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
		padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
	}
	body.home .rtph-cta-bar .elementor-widget-button { flex: 0 1 420px; width: 100%; max-width: 420px; }
	body.home .rtph-cta-bar .elementor-button { width: 100%; justify-content: center; }
	body.home .rtph-cta-bar .elementor-button-text { white-space: nowrap; }
}

/* --- 10. Accesibilidad ---------------------------------------------- */
body.home .elementor-tab-title a:focus-visible,
body.home .elementor-button:focus-visible {
	outline: 2px solid var(--rtph-oro);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.home *, body.home *::before, body.home *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 767px) {
	body.home { padding-bottom: 96px; background-attachment: scroll; }
}

/* --- 11. Blindaje anti-desbordamiento horizontal ------------------- */
/* Los contenedores flex anidados de Elementor usan min-width:auto y no
   pueden encogerse por debajo de su contenido, lo que ensanchaba toda
   la pagina en movil. Se les permite encoger y se limita el ancho. */
html, body { max-width: 100%; }
body.home { overflow-x: hidden; }
body.home .e-con,
body.home .e-con-full,
body.home .elementor-widget,
body.home .elementor-widget-container {
	min-width: 0 !important;
}
body.home .elementor-heading-title,
body.home .elementor-text-editor,
body.home .elementor-widget-text-editor p {
	max-width: 100%;
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	body.home .e-con,
	body.home .e-con-full,
	body.home .elementor-widget,
	body.home .elementor-widget-container,
	body.home .elementor-heading-title,
	body.home .elementor-text-editor { max-width: 100% !important; }
	body.home .elementor-heading-title { white-space: normal !important; }
}

/* --- 12. PAGINAS LEGALES (privacidad / terminos / reembolsos) ------- */
/* Estas paginas NO son `body.home`, asi que no heredan las reglas de la
   landing: se estilan aqui, acotadas a la clase del contenedor.        */
body.page-id-14, body.page-id-15, body.page-id-16 { background-color: var(--rtph-negro); }

.rtph-legal-page { color: var(--rtph-marfil); }
.rtph-legal-page h1,
.rtph-legal-page h2,
.rtph-legal-page h3,
.rtph-legal-page .elementor-heading-title { font-family: var(--rtph-serif); line-height: 1.3; }
.rtph-legal-h1 { margin: 0; }
.rtph-legal-h1 .elementor-heading-title { color: var(--rtph-oro-luz); }

.rtph-legal,
.rtph-legal p,
.rtph-legal li {
	color: rgba(245, 233, 213, .88);
	font-family: var(--rtph-sans);
	font-size: 15px;
	line-height: 1.75;
}
.rtph-legal p { margin: 0 0 14px; }
.rtph-legal h3 {
	margin: 26px 0 8px;
	font-size: 18px;
	letter-spacing: .4px;
	color: var(--rtph-oro-luz);
}
.rtph-legal ul { margin: 0 0 16px; padding-left: 20px; }
.rtph-legal li { margin-bottom: 8px; }
.rtph-legal li::marker { color: var(--rtph-oro); }
.rtph-legal strong { color: var(--rtph-blanco); font-weight: 600; }
.rtph-legal a { color: var(--rtph-oro); text-decoration: underline; text-underline-offset: 3px; }
.rtph-legal a:hover,
.rtph-legal a:focus-visible { color: var(--rtph-oro-luz); }

/* Foco accesible tambien en estas paginas */
.rtph-legal-page .elementor-button:focus-visible,
.rtph-legal-page a:focus-visible {
	outline: 2px solid var(--rtph-oro);
	outline-offset: 3px;
}

/* --- 13. Footer: enlaces legales ----------------------------------- */
/* Hello Elementor define `a { color: #c36 }` (rosa) en su reset.css y el
   Text Editor de Elementor no tiene control nativo de color de enlace,
   asi que los enlaces del footer heredaban ese rosa.                    */
.rtph-footer-legal a,
.rtph-footer-legal a:visited {
	color: var(--rtph-oro);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 175, 55, .35);
	transition: color .2s ease, border-bottom-color .2s ease;
}
.rtph-footer-legal a:hover,
.rtph-footer-legal a:focus-visible {
	color: var(--rtph-oro-luz);
	border-bottom-color: var(--rtph-oro-luz);
}

/* --- 14. Pastillas de telefono (hero + footer) ---------------------- */
/* Hello Elementor pinta `a{color:#c36}`; el Heading con enlace no tiene
   control nativo de color, asi que el numero saldria rosa. */
.rtph-chip-num a,
.rtph-chip-num a:visited { color: inherit; text-decoration: none; }
.rtph-chip-num a:hover,
.rtph-chip-num a:focus-visible { color: var(--rtph-oro-luz); }
.rtph-phone-chip { transition: border-color .25s ease, background-color .25s ease; }
.rtph-phone-chip:hover { border-color: var(--rtph-oro) !important; background-color: rgba(212, 175, 55, .10) !important; }

/* --- 15. Página Amarres de Amor ------------------------------------- */
/* La landing reutiliza la estructura visual de la home (clase `home`),
   pero el contenido largo necesita una medida de lectura propia. */
.rtph-amor-page .rtph-amor-content {
	max-width: 880px;
	margin: 0 auto;
	text-align: left;
}
.rtph-amor-page .rtph-amor-content p,
.rtph-amor-page .rtph-amor-content li {
	color: rgba(245, 233, 213, .92);
	font-family: var(--rtph-sans);
	font-size: 17px;
	line-height: 1.85;
}
.rtph-amor-page .rtph-amor-content p { margin: 0 0 1.15em; }
.rtph-amor-page .rtph-amor-content h2 {
	margin: 1.9em 0 .55em;
	font-family: var(--rtph-serif);
	font-size: 34px;
	line-height: 1.22;
	letter-spacing: .4px;
	color: var(--rtph-oro);
	text-transform: uppercase;
}
.rtph-amor-page .rtph-amor-content h3 {
	margin: 1.45em 0 .35em;
	font-family: var(--rtph-romantic);
	font-size: 27px;
	line-height: 1.25;
	color: var(--rtph-marfil);
}
.rtph-amor-page .rtph-amor-content ul,
.rtph-amor-page .rtph-amor-content ol {
	margin: 0 0 1.35em 1.25em;
	padding: 0;
}
.rtph-amor-page .rtph-amor-content li { margin-bottom: .55em; }
.rtph-amor-page .rtph-amor-content li::marker { color: var(--rtph-oro); }
.rtph-amor-page .rtph-amor-content a {
	color: var(--rtph-oro);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rtph-amor-page .rtph-amor-content a:hover,
.rtph-amor-page .rtph-amor-content a:focus-visible { color: var(--rtph-oro-luz); }
.rtph-amor-page .rtph-amor-content strong { color: var(--rtph-blanco); font-weight: 600; }
.rtph-amor-page .rtph-amor-box {
	margin: 1.6em 0;
	padding: 22px 26px;
	border: 1px solid rgba(212, 175, 55, .45);
	border-radius: 10px;
	background: rgba(41, 0, 6, .55);
}
.rtph-amor-page .rtph-amor-box p:last-child { margin-bottom: 0; }
.rtph-amor-page .rtph-amor-kicker {
	margin: 0 0 10px;
	font-family: var(--rtph-sans);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--rtph-oro);
}
.rtph-amor-page .rtph-amor-note {
	margin: 0 0 18px;
	font-family: var(--rtph-sans);
	font-size: 12px;
	line-height: 1.55;
	color: rgba(245, 233, 213, .72);
}
@media (max-width: 767px) {
	.rtph-amor-page .rtph-amor-content p,
	.rtph-amor-page .rtph-amor-content li { font-size: 16px; line-height: 1.78; }
	.rtph-amor-page .rtph-amor-content h2 { font-size: 25px; line-height: 1.28; }
	.rtph-amor-page .rtph-amor-content h3 { font-size: 23px; }
	.rtph-amor-page .rtph-amor-box { padding: 18px 18px; }
}
/* --- 16. Footer: correo en móviles estrechos ----------------------- */
/* El botón de correo tiene padding lateral amplio y el texto no parte,
   lo que empujaba el layout 9 px en 360 px. */
@media (max-width: 420px) {
	.rtph-footer-mail .elementor-button {
		max-width: 100%;
		padding-left: 14px;
		padding-right: 14px;
	}
	.rtph-footer-mail .elementor-button-text {
		white-space: normal;
		overflow-wrap: anywhere;
		line-height: 1.35;
	}
}
/* --- 17. Footer: correo, ajuste fino ------------------------------- */
@media (max-width: 420px) {
	.rtph-footer-mail .elementor-button-text { font-size: 13px; letter-spacing: -.15px; }
}
/* --- 18. Contenido largo: ancho de lectura ------------------------- */
/* Elementor fija max-width: 100% al widget; se recupera la medida
   de lectura y se centra dentro del contenedor. */
body.home.rtph-amor-page .rtph-amor-content {
	width: 100% !important;
	max-width: 880px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.home.rtph-amor-page .rtph-amor-content h2 {
	color: var(--rtph-oro) !important;
}