/*
*
*  * EENDA
*  * Marketing, Desarrollo & Consulting
*  * www.eenda.com
*  * © 2026
*
*/

/* =========================================================================
   Ocean Clinik — Sistema de diseño (style.css)
   Maquetación incremental. Alcance actual: HEADER + HERO (+ footer provisional).
   Paleta tomada del logotipo real (azules). Sin frameworks JS.
   ========================================================================= */

:root {
	/* Paleta de marca (muestreada del logotipo) */
	--ocean-primary:   #003485; /* Azul profundo (texto e isotipo) */
	--ocean-secondary: #2B5896; /* Azul medio (degradado del isotipo) */
	--ocean-light:     #72A0CB; /* Azul claro ("Estudio Dental") */
	--ocean-aqua:      #E4ECF8; /* Tinte azul muy claro */
	--ocean-sand:      #F6F3EE; /* Arena suave */
	--ocean-white:     #FAFAF8; /* Blanco cálido */
	--ocean-gray:      #6D7278; /* Gris texto */
	--ocean-text:      #1F2933; /* Casi negro */

	/* Tipografías */
	--font-title: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Radios y sombras */
	--radius-pill: 999px;
	--shadow-header: 0 12px 40px rgba(11, 60, 93, 0.10);

	/* Animación */
	--ease: cubic-bezier(.22, .61, .36, 1);

	/* Altura del header */
	--header-h: 92px;
}

/* --------------------------------------------------------------- Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.front-end {
	font-family: var(--font-body);
	color: var(--ocean-text);
	background: var(--ocean-white);
	font-size: 17px;
	line-height: 1.75;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-title); color: var(--ocean-text); font-weight: 600; }
p { color: var(--ocean-gray); }
a { color: var(--ocean-secondary); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--ocean-primary); }
img { max-width: 100%; height: auto; }
.container-xl { max-width: 1320px; }

/* Tipografía editorial */
.oc-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--font-body); font-weight: 600; font-size: 13px;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--ocean-secondary); margin: 0 0 20px;
}
.oc-eyebrow i { font-size: 17px; }

.oc-h1 {
	font-size: clamp(46px, 5.4vw, 84px);
	line-height: 1.0; letter-spacing: -0.035em; font-weight: 600; margin: 0 0 26px;
}
.oc-lead { font-size: 19px; line-height: 1.7; }

/* ------------------------------------------------------------- Botones */
.btn-ocean,
.btn-ocean-outline,
.btn-ocean-light,
.btn-ocean-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	border-radius: var(--radius-pill); padding: 15px 30px;
	font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
	transition: all .3s var(--ease); text-decoration: none;
}
.btn-ocean { background: var(--ocean-primary); color: #fff; border-color: var(--ocean-primary); }
.btn-ocean:hover { background: var(--ocean-secondary); border-color: var(--ocean-secondary); color: #fff; transform: translateY(-2px); }

.btn-ocean-outline { background: transparent; color: var(--ocean-primary); border-color: rgba(0, 52, 133, .32); }
.btn-ocean-outline:hover { border-color: var(--ocean-primary); color: var(--ocean-primary); transform: translateY(-2px); }

.btn-ocean-light { background: #fff; color: var(--ocean-primary); border-color: #fff; }
.btn-ocean-light:hover { background: var(--ocean-aqua); border-color: var(--ocean-aqua); color: var(--ocean-primary); transform: translateY(-2px); }

.btn-ocean-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn-ocean-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; transform: translateY(-2px); }

.btn-ocean i, .btn-ocean-outline i, .btn-ocean-light i, .btn-ocean-ghost i { font-size: 18px; }

/* -------------------------------------------------------------- Header */
.oc-header {
	position: relative; z-index: 1030;
	background: rgba(250, 250, 248, 0.96);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(0, 52, 133, .06);
}
/* Variante superpuesta (home): transparente, sobre el hero a pantalla completa.
   NO es sticky: permanece en su sitio y se va con el scroll. */
.oc-header--overlay {
	position: absolute; top: 0; left: 0; right: 0;
	background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
	border-bottom: none;
}

/* Barra: 3 zonas equilibradas con el logo centrado */
.oc-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--header-h); }

.oc-brand { justify-self: center; display: inline-flex; align-items: center; }
.oc-logo { height: 60px; width: auto; display: block; }
.oc-logo--sm { height: 44px; }
/* Logo en blanco cuando el header está superpuesto sobre la imagen */
.oc-header--overlay .oc-logo { filter: brightness(0) invert(1); }

.oc-nav { display: flex; align-items: center; gap: 4px; }
.oc-nav--left { justify-self: start; }
.oc-nav--right { justify-self: end; }
.oc-nav__link {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 500; font-size: 15px; color: var(--ocean-text);
	padding: 9px 14px; border-radius: var(--radius-pill); white-space: nowrap;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.oc-nav__link:hover { color: var(--ocean-primary); background: rgba(0, 52, 133, .07); }
/* Navegación sobre el hero (overlay): texto claro */
.oc-header--overlay .oc-nav__link { color: #fff; }
.oc-header--overlay .oc-nav__link:hover { color: #fff; background: rgba(255,255,255,.16); }

.oc-burger { border: none; background: transparent; color: var(--ocean-primary); font-size: 30px; line-height: 1; padding: 2px; display: none; }
.oc-header--overlay .oc-burger { color: #fff; }

/* Selector de idioma */
.oc-lang { position: relative; }
.oc-lang__toggle {
	display: inline-flex; align-items: center; gap: 7px;
	background: transparent; border: 1px solid rgba(0, 52, 133, .18);
	border-radius: var(--radius-pill); padding: 7px 12px;
	font-family: var(--font-body); font-weight: 600; font-size: 14px;
	color: var(--ocean-text); cursor: pointer; white-space: nowrap;
	transition: border-color .25s var(--ease), color .25s var(--ease);
}
.oc-lang__toggle:hover { border-color: var(--ocean-primary); }
.oc-lang__toggle i { font-size: 16px; }
.oc-lang__code { letter-spacing: .04em; }
.oc-flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.oc-lang__menu { border: none; border-radius: 16px; padding: 8px; box-shadow: var(--shadow-header); margin-top: 12px; min-width: 196px; }
.oc-lang__menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 12px; font-weight: 500; color: var(--ocean-text); }
.oc-lang__menu .dropdown-item:hover, .oc-lang__menu .dropdown-item.active { background: var(--ocean-aqua); color: var(--ocean-primary); }
/* Selector de idioma en overlay (texto y borde claros sobre el hero) */
.oc-header--overlay .oc-lang__toggle { color: #fff; border-color: rgba(255,255,255,.45); }
.oc-header--overlay .oc-lang__toggle:hover { border-color: #fff; }

/* Offcanvas móvil */
.oc-offcanvas { background: var(--ocean-white); }
.oc-offcanvas__cta { display: grid; gap: 10px; margin-bottom: 24px; }
.oc-offcanvas__nav a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 15px 4px; border-bottom: 1px solid rgba(0,52,133,.08);
	color: var(--ocean-text); font-weight: 500; font-size: 17px;
}
.oc-offcanvas__nav a:hover { color: var(--ocean-secondary); }
.oc-offcanvas__nav i { color: var(--ocean-light); }

/* ---------------------------------------------------------------- Hero */
.oc-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex; align-items: center;
	padding: calc(var(--header-h) + 24px) 0 90px;
	background-color: var(--ocean-primary);
	overflow: hidden;
}
/* Capa de imagen con parallax (se traslada con el scroll vía JS).
   Es más alta que el hero para que el desplazamiento no deje huecos.
   Para cambiar la foto, sustituir la url. */
.oc-hero__bg {
	position: absolute; left: 0; right: 0; top: -15%; bottom: -15%;
	background: url("../images/hero/hero-home.jpg") center / cover no-repeat;
	background-color: var(--ocean-primary);
	z-index: 0; will-change: transform;
}
/* Velo azul de marca para legibilidad del texto (más opaco a la izquierda,
   donde se apoya el texto; suelta el agua turquesa a la derecha). */
.oc-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(96deg, rgba(0,28,72,.88) 0%, rgba(0,40,98,.62) 42%, rgba(0,52,133,.22) 100%),
		linear-gradient(180deg, rgba(0,28,72,0) 58%, rgba(0,28,72,.42) 100%);
}
.oc-hero__content { max-width: 660px; color: #fff; position: relative; z-index: 2; }
.oc-hero .oc-eyebrow { color: var(--ocean-light); }
.oc-hero h1, .oc-hero .oc-h1 { color: #fff; }
.oc-hero__lead { color: rgba(255,255,255,.88); margin-bottom: 38px; }
.oc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.oc-hero__scroll {
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	z-index: 2; color: rgba(255,255,255,.75); font-size: 26px;
	animation: ocBounce 2.2s var(--ease) infinite;
}
@keyframes ocBounce { 0%,100%{ transform: translate(-50%, 0);} 50%{ transform: translate(-50%, 8px);} }

/* -------------------------------------------------- Footer (provisional) */
.oc-footer { background: var(--ocean-primary); color: var(--ocean-white); padding: 72px 0 28px; }
.oc-footer a { color: rgba(250,248,248,.78); }
.oc-footer a:hover { color: #fff; }
.oc-footer__logo { display: inline-block; background: #fff; border-radius: 18px; padding: 16px 22px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.oc-footer__logo img { height: 52px; width: auto; display: block; }
.oc-footer h4 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px; }
.oc-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.oc-footer__social { display: flex; gap: 12px; margin-top: 22px; }
.oc-footer__social a { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #fff; font-size: 18px; transition: background .25s var(--ease); }
.oc-footer__social a:hover { background: var(--ocean-secondary); }
.oc-footer__bottom { margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: rgba(250,248,248,.62); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.oc-footer__bottom a { color: rgba(250,248,248,.62); }

/* ------------------------------------------------- Sticky mobile CTA */
.oc-mobile-cta {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
	display: none; grid-template-columns: repeat(3, 1fr); gap: 6px;
	background: var(--ocean-white); box-shadow: 0 -12px 40px rgba(11,60,93,.12); padding: 8px;
}
.oc-mobile-cta a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--ocean-primary); }
.oc-mobile-cta a i { font-size: 20px; }
.oc-mobile-cta a.is-primary { background: var(--ocean-primary); color: #fff; }

/* ----------------------------------------------------- Reveal on scroll */
.oc-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.oc-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.oc-reveal { opacity: 1; transform: none; transition: none; }
	.oc-hero__scroll { animation: none; }
}