/*
Theme Name: OnlyFamous Blocks
Theme URI: https://onlyfamous.agency/
Author: JeanTech
Author URI: https://jeantech.dev/
Description: Tema de bloques (Gutenberg) para OnlyFamous Agency. Clon fiel del sitio original: paleta oro #C49B31 + negro #050505, tarjetas blancas con hairline, hero con foto velada y tipografías Outfit + Inter. Todo el contenido es editable con bloques nativos.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onlyfamous-blocks
Tags: block-theme, one-page, landing
*/

/* =====================================================================
   0. TOKENS
   ===================================================================== */
:root {
	--of-gold: #C49B31;
	--of-gold-gradient: linear-gradient(135deg, #BF953F 0%, #FCF6BA 35%, #B38728 70%, #FBF5B7 100%);
	--of-gold-gradient-hover: linear-gradient(135deg, #A88133 0%, #EBE1A3 35%, #99721E 70%, #E6E0A6 100%);
	--of-ink: #050505;
	--of-surface: #F7F7F9;
	--of-text: #1A1A1A;
	--of-muted: #666666;
	--of-light: #FFFFFF;
	--of-hairline: rgba(0, 0, 0, 0.08);
	--of-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	--of-shadow-hover: 0 12px 30px rgba(196, 155, 49, 0.15);
	--of-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	--of-nav-h: 88px;
	/* CANAL UNICO del sitio. Debe declararse aqui y no depender de
	   --wp--style--root--padding-*: esa variable no siempre resuelve en el
	   header (layout flex) y en movil daba 40px cuando las secciones daban
	   20px, descuadrando el logo respecto al H1. Mismo clamp que theme.json. */
	--of-gutter: clamp(20px, 4vw, 40px);
}

/* =====================================================================
   1. BASE
   ===================================================================== */
html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* El header es fixed: nada debe quedar debajo al saltar a un ancla. */
.of-section[id],
[id="aplicar"] {
	scroll-margin-top: calc(var(--of-nav-h) + 8px);
}

/* =====================================================================
   2. ORO — texto con degradado
   Funciona como clase de bloque (className) y como FORMATO en linea
   (el cliente selecciona las palabras y pulsa "Dorado" en la barra).
   ===================================================================== */
.of-gold-text,
.of-gold-text span {
	background: var(--of-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* =====================================================================
   3. HEADER
   ===================================================================== */
.of-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--of-ink);
	color: var(--of-light);
	transition: var(--of-transition);
}

body.admin-bar .of-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .of-header {
		top: 46px;
	}
}

/* El grupo del navbar es un layout FLEX: WordPress solo inyecta
   has-global-padding en los contenedores CONSTRAINED, asi que aqui hay que
   aplicar el canal a mano o el logo y el boton tocan los filos de la pantalla.
   Se reutiliza la misma variable raiz que usan las secciones y el footer:
   un unico canal para todo el sitio. */
.of-header > .wp-block-group {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: var(--of-gutter);
	padding-right: var(--of-gutter);
	transition: var(--of-transition);
}

.of-header.is-scrolled > .wp-block-group {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.of-header.is-scrolled {
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* El header vive sobre negro: fuerza texto claro en todo su arbol. */
.of-header,
.of-header a,
.of-header p {
	color: var(--of-light);
}

.of-logo {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

/* =====================================================================
   4. BOTONES
   ===================================================================== */
.wp-block-button__link {
	border: 2px solid transparent;
	transition: var(--of-transition);
	text-align: center;
}

/* Boton primario: degradado oro. Si el bloque no declara fondo, aplica este. */
.of-btn-primary .wp-block-button__link {
	background: var(--of-gold-gradient) !important;
	color: #111111;
	border: none;
	box-shadow: 0 4px 15px rgba(196, 155, 49, 0.3);
	position: relative;
	overflow: hidden;
}

.of-btn-primary .wp-block-button__link:hover {
	background: var(--of-gold-gradient-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(196, 155, 49, 0.5);
}

/* Destello diagonal al pasar el raton (el .btn-glow del original). */
.of-btn-primary .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: rgba(255, 255, 255, 0.3);
	transform: rotate(45deg) translateX(-100%);
	transition: var(--of-transition);
	pointer-events: none;
}

.of-btn-primary .wp-block-button__link:hover::after {
	transform: rotate(45deg) translateX(100%);
	transition: transform 0.6s ease;
}

/* Boton outline (navbar): borde fino blanco translucido que vira a oro. */
.of-btn-outline .wp-block-button__link {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--of-light);
}

.of-btn-outline .wp-block-button__link:hover {
	background: rgba(196, 155, 49, 0.1) !important;
	border-color: var(--of-gold);
	color: var(--of-gold);
}

/* Boton de cierre: oro solido, ancho completo, versalitas. */
.of-btn-submit .wp-block-button__link {
	background: var(--of-gold-gradient) !important;
	color: #111111;
	border: none;
	border-radius: 6px;
	font-weight: 700;
	padding: 1.1rem 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	width: 100%;
}

.of-btn-submit .wp-block-button__link:hover {
	background: var(--of-gold-gradient-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(196, 155, 49, 0.4);
}

/* =====================================================================
   5. SECCIONES
   ===================================================================== */
.of-section {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.of-section-header {
	margin-bottom: 4rem;
}

.of-section-header .wp-block-heading {
	margin-bottom: 1rem;
}

.of-section-desc {
	color: var(--of-muted);
	font-size: 1.1rem;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* El original sumaba 3rem del parrafo + 4rem del header (7rem en total).
   (0,2,0) para ganar al reset de margenes del layout de flujo. */
.of-section-header > .of-section-desc {
	margin-block-end: 3rem;
}

/* =====================================================================
   6. HERO
   ===================================================================== */
.of-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 8rem;
	padding-bottom: 4rem;
	/* core pone padding:1em en el cover. Se sustituye por el canal del sitio
	   para que en movil el texto del hero alinee con las secciones. */
	padding-left: var(--of-gutter);
	padding-right: var(--of-gutter);
}

/* NOTA sobre el parallax: el sitio original usaba background-attachment:fixed
   sobre una imagen de fondo CSS. core/cover NO usa una imagen de fondo: monta
   un <img> real con object-fit, asi que background-attachment no hace nada.
   Forzarlo obligaria a mover la imagen a CSS (el cliente perderia el selector
   del editor) y hunde el LCP porque el navegador descubre la imagen mas tarde.
   Ademas iOS lo ignora. No se reproduce a proposito. */

.of-hero .wp-block-cover__inner-container {
	max-width: 900px;
	position: relative;
	z-index: 10;
	/* El cover ya aplica el canal en su propio padding, pero core anade
	   has-global-padding al contenedor interno y sumaba un segundo inset:
	   el H1 quedaba a 40px mientras el H2 de las secciones estaba a 20px.
	   Se anula aqui para que todo el sitio comparta un unico eje. */
	padding-left: 0;
	padding-right: 0;
}

/* El velo oscuro del hero. Ahora la foto ya es nocturna, asi que se rebaja
   respecto al original (0.60 -> 0.55 arriba) para que el bokeh dorado respire
   sin perder contraste del titular blanco. */
.of-hero .wp-block-cover__background.has-hero-shade-gradient-background {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.84) 100%);
	opacity: 1;
}

.of-hero-title {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 1.5rem;
	color: var(--of-light);
}

.of-hero-subtitle {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: #E0E0E0;
	max-width: 750px;
	margin: 0 auto 2.5rem;
}

/* =====================================================================
   7. TARJETAS
   ===================================================================== */
.of-card {
	background: var(--of-light);
	border: 1px solid var(--of-hairline);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: var(--of-shadow);
	transition: var(--of-transition);
}

.of-card:hover {
	transform: translateY(-5px);
	border-color: var(--of-gold);
	box-shadow: var(--of-shadow-hover);
}

/* OJO: no poner margenes al h3 de las tarjetas. El ritmo interno lo gobierna
   el blockGap que el bloque declara en el editor; cualquier margen propio
   gana por especificidad y rompe el espaciado en silencio. */

/* =====================================================================
   8. ICONOS (SVG con degradado, servidos como core/image)
   core/image envuelve el <img> en un <figure class="wp-block-image"> con su
   propio margen por defecto: se resetea en cada contexto para que los iconos
   no descuadren las tarjetas.
   ===================================================================== */
.of-icon,
.of-icon-box figure,
.of-avatar figure,
.of-quote-icon,
.of-step figure {
	margin: 0;
}

.of-icon img {
	width: 40px;
	height: 40px;
	display: block;
}

.of-icon-box {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	background: rgba(196, 155, 49, 0.1);
	border: 1px solid rgba(196, 155, 49, 0.3);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.of-icon-box img {
	width: 28px;
	height: 28px;
	display: block;
}

/* =====================================================================
   9. DOLORES / SOLUCION: filas con icono + texto
   ===================================================================== */
.of-dolor {
	display: flex;
	flex-direction: column;
}

.of-solution {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

/* El espaciado interno de la columna de texto lo gobierna el blockGap que
   declara el propio bloque en el editor (0.5rem). Aqui solo se remata el
   ultimo parrafo para que no arrastre margen inferior. */
.of-solution p {
	color: var(--of-muted);
	margin-block-end: 0;
}

/* =====================================================================
   10. TESTIMONIOS
   ===================================================================== */
.of-testimonial {
	background: var(--of-light);
	border: 1px solid var(--of-hairline);
	border-radius: 16px;
	padding: 2.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: var(--of-shadow);
}

.of-quote-icon {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 40px;
	height: 40px;
	opacity: 0.9;
}

.of-quote-icon img {
	width: 40px;
	height: 40px;
	display: block;
}

/* Especificidad (0,2,0): gana al reset de margenes del layout de flujo. */
.of-testimonial > .of-quote {
	font-size: 1.1rem;
	font-style: italic;
	margin-bottom: 2rem;
	position: relative;
	z-index: 2;
}

.of-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.of-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--of-gold-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.of-avatar img {
	width: 22px;
	height: 22px;
	display: block;
	filter: brightness(0) invert(1);
}

.of-author-info h4 {
	margin: 0;
	font-size: 1rem;
}

.of-author-info p {
	color: var(--of-muted);
	font-size: 0.875rem;
	margin: 0;
}

/* =====================================================================
   11. PASOS
   ===================================================================== */
.of-steps {
	gap: 1rem;
	align-items: flex-start;
}

.of-step {
	position: relative;
	gap: 0.5rem;
}

/* Linea conectora entre circulos (equivale al .step-line original).
   Geometria: el circulo ya NO va centrado, va pegado al canal izquierdo de su
   columna (ancho 60px), asi que la linea arranca en left:60px y debe terminar
   en el borde izquierdo del circulo siguiente, que esta a
   "100% (todo el ancho de columna) + gap". Por eso el ancho sigue siendo
   calc(100% + <gap> - 60px): antes se medía desde el centro, ahora desde el
   borde izquierdo, y la distancia recorrida es la misma. */
.of-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 30px;
	left: 60px;
	width: calc(100% + 1rem - 60px);
	height: 2px;
	background: var(--of-gold-gradient);
	opacity: 0.3;
	pointer-events: none;
}

.of-step-number {
	width: 60px;
	height: 60px;
	min-height: 60px;
	margin: 0;
	padding: 0;
	background: var(--of-light);
	border: 2px solid var(--of-gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	box-shadow: 0 0 20px rgba(196, 155, 49, 0.15);
}

.of-step h3 {
	font-size: 1.25rem;
	margin: 0;
}

.of-step p {
	color: var(--of-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* =====================================================================
   12. FAQ (core/details)
   ===================================================================== */
.of-faq-list {
	/* gap explicito y display flex: la separacion NO puede depender del
	   blockGap del bloque. WordPress aplica ese hueco con la regla
	   .is-layout-flow > * + * (una clase), que empata en especificidad con
	   .of-faq { margin: 0 } y la pierde por orden de carga (style.css entra
	   despues). Resultado: las cajas quedaban pegadas, sin separacion. */
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.of-faq {
	background: var(--of-light);
	border: 1px solid var(--of-hairline);
	border-radius: 12px;
	box-shadow: var(--of-shadow);
	overflow: hidden;
	margin: 0;
}

.of-faq summary {
	padding: 1.5rem;
	color: var(--of-text);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-size: 1.1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: var(--of-transition);
}

.of-faq summary::-webkit-details-marker {
	display: none;
}

.of-faq summary::marker {
	content: "";
}

/* Caret dorado: mismo rol que el icono Phosphor del original. */
.of-faq summary::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--of-gold);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform 0.3s ease;
}

.of-faq[open] summary::after {
	transform: rotate(180deg);
}

.of-faq > p,
.of-faq .wp-block-paragraph {
	padding: 0 1.5rem 1.5rem;
	color: var(--of-muted);
	margin: 0;
}

/* =====================================================================
   13. CIERRE
   ===================================================================== */
.of-cta-box {
	padding: 4rem 2rem;
}

.of-cta-box .wp-block-heading {
	margin-bottom: 1rem;
}

/* El original dejaba 3rem bajo el parrafo antes del boton. */
.of-cta-box > .of-section-desc {
	margin-block-end: 3rem;
}

/* =====================================================================
   14. FOOTER
   ===================================================================== */
.of-footer {
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: var(--of-ink);
	color: #AAAAAA;
}

.of-footer,
.of-footer p,
.of-footer a {
	color: #AAAAAA;
}

.of-footer .of-logo {
	color: var(--of-light);
	margin-bottom: 1.5rem;
}

/* =====================================================================
   15. ANIMACION DE ENTRADA
   Solo se oculta si el JS esta activo (clase .of-js en <html>): si el JS
   falla, el contenido se ve igual. Nunca contenido invisible por error.
   ===================================================================== */
.of-fade {
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.of-js .of-fade {
	opacity: 0;
	transform: translateY(30px);
}

.of-js .of-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.of-js .of-stagger > *:nth-child(2) { transition-delay: 100ms; }
.of-js .of-stagger > *:nth-child(3) { transition-delay: 200ms; }
.of-js .of-stagger > *:nth-child(4) { transition-delay: 300ms; }
.of-js .of-stagger > *:nth-child(5) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.of-js .of-fade,
	.of-js .of-fade.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.of-card:hover,
	.of-btn-primary .wp-block-button__link:hover { transform: none; }
	.of-hero .wp-block-cover__image-background { background-attachment: scroll; }
}

/* =====================================================================
   16. PROSA LEGAL (paginas de texto largo)
   El ancho de lectura se limita a ~780px: 1200px en un parrafo de texto
   corrido es ilegible. Se excluyen los alignfull para no romper a futuro
   ninguna pagina que use grupos a sangre.
   ===================================================================== */
.of-main .wp-block-post-title,
.of-main .wp-block-post-content > p,
.of-main .wp-block-post-content > h2,
.of-main .wp-block-post-content > h3,
.of-main .wp-block-post-content > h4,
.of-main .wp-block-post-content > ul,
.of-main .wp-block-post-content > ol,
.of-main .wp-block-post-content > .wp-block-list {
	max-width: 780px;
	margin-inline: auto;
}

.of-main .wp-block-post-content > h2 {
	margin-block-start: 2.5rem;
	margin-block-end: 0.75rem;
	font-size: 1.5rem;
}

.of-main .wp-block-post-content > h3 {
	margin-block-start: 1.75rem;
	margin-block-end: 0.5rem;
	font-size: 1.2rem;
}

.of-main .wp-block-post-content > .wp-block-list {
	padding-inline-start: 1.25rem;
	margin-block: 1rem;
	list-style-position: outside;
}

.of-main .wp-block-post-content > .wp-block-list li {
	margin-block-end: 0.5rem;
	color: var(--of-muted);
}

.of-main .wp-block-post-content > .wp-block-list li strong {
	color: var(--of-text);
}

/* Aviso de "borrador pendiente": imposible de publicar por accidente. */
.of-aviso {
	background: #FFF9E8;
	border: 1px solid var(--of-gold);
	border-inline-start-width: 4px;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	font-size: 0.925rem;
	color: var(--of-text);
}

.of-legal-fecha {
	font-size: 0.875rem;
	color: var(--of-muted);
	margin-block-start: 2.5rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--of-hairline);
}

/* =====================================================================
   17. RESPONSIVE
   ===================================================================== */
@media (max-width: 992px) {
	/* Los 3 pasos usan columnCount:3, que WordPress traduce a
	   grid-template-columns: repeat(3, minmax(0,1fr)) SIN colapsar. En un movil
	   de 390px eso daria tres columnas de ~110px con circulos de 60px pegados.
	   Se fuerza una columna y se ocultan los conectores (ya no hay a quien
	   conectar). Se usa .of-steps.of-stagger (0,2,0) para ganar a la regla
	   wp-container-* del core, que es (0,1,0). */
	.of-steps.of-stagger {
		grid-template-columns: 1fr;
	}
	/* En una columna el texto sigue alineado a la izquierda: el bloque no se
	   centra, se apoya en el canal izquierdo de la seccion. */
	.of-steps .of-step {
		max-width: none;
		margin-inline: 0;
	}
	.of-step:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 768px) {
	.of-section {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	.of-hero {
		padding-top: 6rem;
		padding-bottom: 3rem;
		min-height: auto;
	}
	.of-hero-title {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}
	.of-cta-box {
		padding: 2rem 1rem;
	}
	.of-section-header {
		margin-bottom: 2.5rem;
	}
}