/* -----------------------------------------------------------------------------------

	Vitrina skin for Noha

	The template ships one of these per demo (custom-app.css, custom-photography.css…)
	and that is the intended place to put anything project-specific. Everything here
	is either an accent colour, a token the React island reads, or a component the
	template does not have — pricing, FAQ, the domain form. Noha's own files are
	left untouched so they can be replaced wholesale when the theme updates.

----------------------------------------------------------------------------------- */

:root {
	/*
	   Noha ships black-and-white and expects the project to bring the colour.
	   Ours is four values, and which ground they sit on is not a preference:

	   - persian blue on white  → 9.7:1. The accent for every light section.
	   - banana cream on white  → 1.2:1. Unreadable, so it is *never* used on a
	     light ground; on navy it is 13:1, which is where it earns its place.
	   - navy under white text  → 15.9:1. The ground of every dark band.
	*/
	--accent: #192bc2;        /* persian blue — buttons, links, kickers on light */
	--accent-dark: #150578;   /* navy — the accent's hover, and the dark ground */
	--accent-bright: #ffbe0b; /* the bright accent — on dark grounds only */
	--navy: #150578;
	--paper: #fbfbff;         /* ghost white — the page, one step off pure white */
	--ink: #10102e;           /* near-black, tinted towards the navy */

	/* Tokens the React island (DomainWizard) and the CSS mock-ups read. They
	   exist so those components never hard-code a colour of their own. */
	--muted: rgba(16, 16, 46, 0.6);
	--line: rgba(16, 16, 46, 0.14);
	--wash: rgba(25, 43, 194, 0.04);
	--ok: #2f8f63;            /* stays green: it means "domain available" */
	--bad: #d92d3d;
	--radius: 2px;
}

/* -----------------------------------------------------------------------------------
	PALETTE APPLIED TO THE THEME

	Noha hard-codes #000000 for type and #ffffff for the page. These four rules
	are the whole re-skin; everything below is components.
----------------------------------------------------------------------------------- */

body { background: var(--paper); color: var(--muted); }

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

p a:not(.sr-button), .menu a, blockquote { color: var(--ink); }

.title-alt { color: rgba(16, 16, 46, 0.42); }

/* Dark grounds: navy instead of the theme's black, with the yellow as their
   accent. `.colored` is the theme's own "this is the accent colour" class. */
#page-loader.text-light { background: var(--navy); }
#footer.text-light { background: var(--navy); }
.text-light .colored { color: var(--accent-bright) !important; }
.text-light .title-alt { color: rgba(255, 255, 255, 0.55); }

/* -----------------------------------------------------------------------------------
	IONICONS — re-declared to stop the 188 KB TTF being the file that wins

	ionicons.css lists eot, ttf, woff, svg in that order, so every modern browser
	downloads the TrueType. A later @font-face for the same family wins, and this
	one offers only the 67 KB woff. Same glyphs, a third of the bytes, and the
	vendor file stays untouched.
----------------------------------------------------------------------------------- */

@font-face {
	font-family: 'Ionicons';
	src: url('../fonts/ionicons.woff?v=2.0.0') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	}

/* -----------------------------------------------------------------------------------
	ACCENT
----------------------------------------------------------------------------------- */

.colored { color: var(--accent) !important; }

.sr-button.style-custom { background: var(--accent) !important; color: #ffffff !important; }
.sr-button.style-custom:hover { background: var(--accent-dark) !important; color: #ffffff !important; }

nav#main-nav.underline ul > li > a::after { background: var(--accent) !important; }

/* -----------------------------------------------------------------------------------
	HEADER — a wordmark where the demo has a logo image
----------------------------------------------------------------------------------- */

/* The demo swaps two logo images; ours is a wordmark, so the same switch has to
   be a colour. script.js adds `bg-dark` to #logo while a `.text-light` section
   is under it — the hero, the two black bands, the sector grid, the footer. */
header #logo .text-logo { color: var(--ink); transition: color 0.3s ease; }
header #logo.bg-dark .text-logo { color: #ffffff; }

@media only screen and (max-width: 768px) {
	/* Below this width the sidebar becomes a white top bar and the logo sits
	   inside it, so the switch would make it white on white. */
	header #logo .text-logo,
	header #logo.bg-dark .text-logo { color: var(--ink); }
}

/* -----------------------------------------------------------------------------------
	FOOTER — copyright on one side, the language switch on the other

	The switch used to live in #header-actions, where an 80px sidebar left room
	for "ES"/"EN" set on its side and nothing more. In the footer it can say the
	language's own name, which is the only label a visitor who cannot read the
	current one will recognise.
----------------------------------------------------------------------------------- */

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 30px;
	/* On a phone the columns stack, so without this rule the copyright ends up
	   one line under the last contact link with nothing between them. */
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid var(--line);
	}
	#footer.text-light .footer-bottom { border-top-color: rgba(255, 255, 255, 0.18); }
	.footer-bottom p { margin: 0; }

.footer-lang a {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	}
	#footer.text-light .footer-lang a { color: rgba(255, 255, 255, 0.7); }
	#footer.text-light .footer-lang a:hover { color: #ffffff; }

/* -----------------------------------------------------------------------------------
	HERO — a still photograph instead of the demo's Revolution slider
----------------------------------------------------------------------------------- */

#hero.hero-photo {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	}
	/* The scrim is what makes white text legible on a photograph we did not
	   art-direct: a wash over everything, plus a heavier wedge on the left where
	   the copy sits. Without the second layer the form hint disappears into the
	   shop window behind it. */
	#hero.hero-photo::before {
		content: '';
		position: absolute;
		inset: 0;
		background:
			linear-gradient(100deg, rgba(9, 4, 48, 0.93) 0%, rgba(11, 5, 56, 0.8) 42%, rgba(13, 6, 64, 0.38) 100%),
			rgba(21, 5, 120, 0.22);
		}

/* The hero holds a form, so it cannot be vertically centred at every height —
   it would collide with the header on a short laptop screen. Top-aligned with
   generous padding behaves at any height. */
#hero.hero-full.hero-photo #page-title {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	padding-top: 180px;
	padding-bottom: 160px;
	}
	/* No max-width here: `#page-title` is a `.wrapper`, and the theme's own
	   `max-width: calc(100% - 80px)` is what keeps it inside a phone. Setting a
	   pixel max-width overrode that and pushed the hero off the right edge. */

/* Small text over a photograph needs more than the theme's opacities: a shop
   window is high-frequency detail, and 60%-white body copy vanishes into it. */
#hero.hero-photo #page-title { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55); }
#hero.hero-photo .domain-form .hint,
#hero.hero-photo .hero-note { color: rgba(255, 255, 255, 0.78) !important; }
#hero.hero-photo .trust-list li { color: rgba(255, 255, 255, 0.88); }

#hero.hero-photo #page-title h1 { max-width: 780px; }
.hero-sub { max-width: 560px; font-size: 17px; line-height: 30px; }
	.text-light .hero-sub { color: rgba(255, 255, 255, 0.8); }
.hero-note { margin: 12px 0 0; font-size: 13px; }

@media only screen and (max-width: 767px) {
	#hero.hero-full.hero-photo #page-title { padding-top: 140px; padding-bottom: 100px; }
}

/* Paragraph measure inside the theme's 1200px wrapper — Noha's own body text
   only ever appears in columns or in .wrapper-small. */
.wrapper-text, .lede-text { max-width: 720px; }
.lede-text { font-size: 17px; line-height: 30px; }

/* -----------------------------------------------------------------------------------
	DOMAIN FORM — the landing's only form and its main call to action
----------------------------------------------------------------------------------- */

.domain-form { max-width: 560px; }
.domain-form label {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
	}
	.text-light .domain-form label { color: rgba(255, 255, 255, 0.7); }

.domain-form .field { display: flex; flex-wrap: wrap; gap: 10px; }

/* The theme builds the two controls to different heights and never puts them on
   one row: the text input is `height: 22px` plus 13px padding and a border
   (50px), the submit is a 20px line plus 17px padding (54px). Side by side that
   4px step is visible, so both are pinned to one border-box height here. */
.domain-form input[type=text],
.domain-form input[type=submit] {
	box-sizing: border-box;
	height: 54px;
	margin: 0;
	}

.domain-form input[type=text] {
	flex: 1 1 220px;
	max-width: none;
	background: rgba(255, 255, 255, 0.06);
	}
	.text-light .domain-form input[type=text]:focus { background: rgba(255, 255, 255, 0.12); }
	.domain-form input[type=text]:focus { border-color: var(--accent); outline: none; }

.domain-form input[type=submit] { flex: 0 0 auto; margin-bottom: 0; }
/* Persian blue on a navy ground is 1.9:1 — invisible. On dark the call to
   action switches to the yellow, which is 13:1 against it. */
.domain-form.on-dark input[type=submit] { background: var(--accent-bright); color: var(--navy); }
.domain-form.on-dark input[type=submit]:hover { background: #ffd400; color: var(--navy); }

.domain-form .hint { margin: 14px 0 0; font-size: 13px; line-height: 22px; }
.domain-form .hint .tlds { white-space: nowrap; font-weight: 500; }
	.text-light .domain-form .hint { color: rgba(255, 255, 255, 0.6); }

/* -----------------------------------------------------------------------------------
	TRUST ROW under the hero form
----------------------------------------------------------------------------------- */

.trust-list { list-style: none; margin: 30px 0 0; padding: 0; }
.trust-list li {
	display: inline-block;
	margin: 0 30px 6px 0;
	font-size: 13px;
	line-height: 24px;
	}
/* style.css:597 is `.text-light i[class*='ion-'] { color: #ffffff }`, which
   outranks a bare `.trust-list i` and was quietly turning these white. */
.trust-list i { margin-right: 8px; }
.text-light .trust-list i[class*='ion-'] { color: var(--accent-bright); }
	.text-light .trust-list li { color: rgba(255, 255, 255, 0.75); }

/* -----------------------------------------------------------------------------------
	SECTOR GRID — captions carry a second line the template's do not
----------------------------------------------------------------------------------- */

.overlay-caption .caption-note {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 22px;
	opacity: 0.85;
	}

/* The theme's captions assume art-directed photography. Ours is stock, and half
   of it is a white salon or a white clinic — so every tile gets a foot of
   shadow under the words. */
#sector-grid .thumb-hover::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	pointer-events: none;
	background: linear-gradient(to top, rgba(9, 4, 48, 0.8), rgba(9, 4, 48, 0));
	z-index: 1;
	}
#sector-grid .overlay-caption { z-index: 2; }

/* -----------------------------------------------------------------------------------
	CHECK / CROSS LISTS
----------------------------------------------------------------------------------- */

.marked-list { list-style: none; margin: 0; padding: 0; }
.marked-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	line-height: 26px;
	}
.marked-list li i { position: absolute; left: 0; top: 4px; font-size: 16px; }
.marked-list.yes li i { color: var(--accent); }
	.text-light .marked-list.yes li i { color: var(--accent-bright); }
.marked-list.no li i { color: rgba(16, 16, 46, 0.25); }
	.text-light .marked-list.no li i { color: rgba(255, 255, 255, 0.3); }

/* -----------------------------------------------------------------------------------
	STEPS
----------------------------------------------------------------------------------- */

.step-num {
	display: inline-block;
	width: 46px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: 15px;
	margin-bottom: 24px;
	}
	.text-light .step-num { border-color: rgba(255, 255, 255, 0.3); }

/* -----------------------------------------------------------------------------------
	PRICE
----------------------------------------------------------------------------------- */

.price-amount { line-height: 1; margin: 0; color: var(--ink); }
.price-amount strong {
	font-size: 84px;
	font-weight: 300;
	letter-spacing: -0.02em;
	}
.price-amount span { font-size: 20px; opacity: 0.5; }

.price-box {
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 50px;
	}
	.text-light .price-box { border-color: rgba(255, 255, 255, 0.25); }

@media only screen and (max-width: 767px) {
	.price-box { padding: 30px 25px; }
	.price-amount strong { font-size: 60px; }
}

/* -----------------------------------------------------------------------------------
	LIMITS NOTE — the boundary of "we make the changes"
----------------------------------------------------------------------------------- */

.limits-note {
	border: 1px dashed rgba(255, 236, 81, 0.4);
	border-radius: 2px;
	padding: 30px 35px;
	}
	.limits-note h6 { margin-bottom: 10px; }
	.limits-note p { margin: 0; font-size: 14px; }

/* -----------------------------------------------------------------------------------
	FAQ — no accordion in the theme, so <details> styled to match its hairlines
----------------------------------------------------------------------------------- */

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 26px 0;
	cursor: pointer;
	font-size: 17px;
	line-height: 28px;
	color: var(--ink);
	list-style: none;
	}
	.faq-list summary::-webkit-details-marker { display: none; }
	.faq-list summary:hover { color: var(--accent); }
.faq-list details p { margin: 0 0 26px; max-width: 640px; }

.faq-sign { position: relative; flex: none; width: 16px; height: 16px; }
.faq-sign::before, .faq-sign::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--accent);
	transition: transform 0.2s ease;
	}
.faq-sign::after { transform: rotate(90deg); }
.faq-list details[open] .faq-sign::after { transform: rotate(0deg); }

/* -----------------------------------------------------------------------------------
	WIZARD — the React island, kept inside the theme's measure
----------------------------------------------------------------------------------- */

.wizard-panel { max-width: 680px; }
.wizard-panel .card {
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 25px;
	background: var(--wash);
	}
.wizard-panel .note {
	font-size: 13px;
	line-height: 22px;
	color: var(--muted);
	border-left: 2px solid var(--line);
	padding-left: 15px;
	}
/* Same pairing, same fix: DomainWizard renders the theme's input next to its
   own `.btn`. */
.wizard-panel input[type=text],
.wizard-panel .btn {
	box-sizing: border-box;
	height: 54px;
	margin: 0;
	}

.wizard-panel .btn {
	display: inline-block;
	font-size: 12px;
	line-height: 20px;
	padding: 17px 40px;
	background: var(--accent);
	color: #ffffff;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.2s ease;
	}
	.wizard-panel .btn:hover { background: var(--accent-dark); }
	.wizard-panel .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* The "what happens after you pay" reminder under the wizard. Ruled off from
   the form so it reads as an aside — something to know, not something to do. */
.after-pay {
	border-top: 1px solid var(--line);
	padding-top: 45px;
	}
	.after-pay h5 { margin-bottom: 10px; }
	.after-pay p { margin: 0; font-size: 14px; }
	.after-pay .step-num { margin-bottom: 18px; }

/* -----------------------------------------------------------------------------------
	LEGAL — aviso legal, privacidad, cookies, términos

	Long prose the theme has no component for. Kept to a reading measure and
	given the one thing Noha does not style at all: tables.
----------------------------------------------------------------------------------- */

.legal-doc { max-width: 760px; }
.legal-updated { font-size: 13px; margin: 10px 0 0; }

.legal-section { margin-top: 40px; }
	.legal-section h2 { margin-bottom: 15px; }
	.legal-section p { margin: 0 0 15px; }
	.legal-section p:last-child { margin-bottom: 0; }
	.legal-section code {
		font-size: 13px;
		background: var(--wash);
		padding: 2px 5px;
		border-radius: 2px;
		}

.legal-list { margin: 0 0 15px; padding: 0 0 0 20px; list-style: disc; }
	.legal-list li { margin-bottom: 8px; }

/* Wide by nature — recipients, purposes, countries. It scrolls inside itself so
   the page never does. */
.legal-table-scroll { overflow-x: auto; margin: 0 0 15px; }
.legal-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 22px;
	}
	.legal-table th,
	.legal-table td {
		border-bottom: 1px solid var(--line);
		padding: 12px 15px 12px 0;
		text-align: left;
		vertical-align: top;
		}
	.legal-table th { color: var(--ink); font-weight: 600; }

.legal-more { border-top: 1px solid var(--line); padding-top: 30px; }
	.legal-more .menu { margin-top: 10px; }