@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,500;0,600;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   CUSTOM PROPERTIES — mirrors the Carrd panel names for reference.
   Change values here and the whole site updates.
   ============================================================ */
:root{
	color-scheme: dark;

	/* BACKGROUND (Carrd "Background" panel) */
	--bg-grad-1: #67B4EB;      /* Stop #1, 28% */
	--bg-grad-2: #6181D4;      /* Stop #2, 100% */
	/* pattern color (#80F7FF @ 15%) now lives inline in the SVG data URI below,
	   since url() can't reference a CSS custom property */

	/* CONTAINER → Appearance → Background (Carrd "Container" panel) */
	--card-grad-1: #44434A; /* Stop #1, 0% */
	--card-grad-2: #68666E; /* Stop #2, 85% */

	--text-white: #FFFFFF;
	--text-muted: rgb(255 255 255 / 61%);

	--accent-gold: #C9A66B;

	/* BUTTONS (Carrd "Buttons" panel) — confirmed */
	--button-bg: #666469;
	--button-hover: #73717A;
	--button-icon: #67B4EB;

	/* ICONS (Carrd "Icons" panel) — confirmed (per-icon color + shared FG/hover) */
	--icon-whatsapp: #CCFF90;
	--icon-instagram: #FF80AB;
	--icon-linkedin: #80D8FF;
	--icon-location: #FF8A80;
	--icon-fg: #44434A;

	--shadow: 0 30px 60px -25px rgb(15 20 35 / 45%), 0 10px 24px -14px rgb(15 20 35 / 30%);
}

*, *::before, *::after{ box-sizing: border-box; }

/* ============================================================
   PAGE
   Carrd → Page: Style Default · Position Center · Width 55
   Padding 4/4 (desktop) · Size 14 (base) · Contents: Center, Spacing 1.5
   Mobile → Padding 1.5/1.5 · Size 11
   ============================================================ */
body{
	margin:0;
	min-height:100svh;
	display:flex;
	align-items:center;
	justify-content:center; /* Position: Center */
	padding-block: 48px;    /* ~ Page Padding 4/4, scaled from base Size 14 */
	padding-inline: 20px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;        /* Page → Size (base) */
	background: linear-gradient(135deg, var(--bg-grad-1) 28%, var(--bg-grad-2) 100%);
	background-attachment: fixed;
	position: relative;
	overflow-x: hidden;
}

/* ============================================================
   BACKGROUND
   Carrd → Background: Gradient / Linear / 45° / Reverse
   Stop 1 #67B4EB 28% · Stop 2 #6181D4 100%
   Pattern: Cubes · Color #80F7FF26 · Size 125 · Thickness 2
   ============================================================ */
/* Real Carrd "Cubes" pattern SVG (viewBox 0 0 128 128, stroke-only, isometric
   cube tiling), recolored to #80F7FF at 15% opacity (the "26" alpha hex) via
   inline `stroke` + `stroke-opacity` — pixel-perfect match instead of the
   previous repeating-linear-gradient approximation. */
body::before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background-image:
		linear-gradient(45deg, rgb(255 255 255 / 10%) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / 10%) 75%),
		linear-gradient(45deg, rgb(255 255 255 / 10%) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / 10%) 75%),
		linear-gradient(45deg, rgb(0 0 0 / 6%) 25%, transparent 25%, transparent 75%, rgb(0 0 0 / 6%) 75%);
	background-size: 140px 140px, 140px 140px, 70px 70px;
	background-position: 0 0, 70px 70px, 35px 35px;
}

/* ============================================================
   CONTAINER → Appearance
   Carrd → Container: Type Columns (50%/50%), Width Max, Height Auto
   Padding 4/3 (desktop) · Corner Rounding 0.5 (all corners)
   Contents: Position Auto, Alignment Left/Center, Spacing 1.25
   Background: Gradient Linear (not reversed) 45°
     Stop 1 #44434A 0% · Stop 2 #68666E 85%
   Pattern: None · Border: none · Drop Shadow: none
   Mobile → Layout: Stack · Padding 3/2.5
   ============================================================ */
.card{
	position: relative;
	z-index: 1;
	width: 55vw; /* Page → Width 55% — proportional to viewport, not a fixed value */
	max-width: 1100px; /* safety ceiling for very large screens */
	min-width: 320px;
	border-radius: 8px; /* ~ Corner Rounding 0.5, tuned down after visual review */
	box-shadow: var(--shadow); /* Carrd says "none", but a soft shadow helps it stand out from the background */
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr; /* Columns: 50% / 50% */
	align-items: stretch;
	background: linear-gradient(45deg, var(--card-grad-1) 0%, var(--card-grad-2) 85%);
	animation: fadeUp 1s ease both;
}

/* ============================================================
   CONTAINER → Animation
   Carrd → On Visible: Fade Up · Duration 1s · Intensity Low
   Delay 0s · Threshold Normal · Replayable: off
   ============================================================ */
@keyframes fadeUp{
	from{ opacity:0; transform: translateY(8px); } /* "Low" intensity = small offset */
	to{ opacity:1; transform: translateY(0); }
}

.text-column{
	padding: 48px 44px; /* ~ Container Padding 4/3, scaled */
	text-align: left;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

/* ============================================================
   IMAGE — Full Bleed, Position Center, no border/shadow (confirmed)
   ============================================================ */
.photo-column{
	margin: 0;
	position:relative;
	min-height: 420px;
}
.photo-column img{
	position: absolute;
	inset: 0;
	width:100%; height:100%;
	object-fit: cover;
	display:block;
	transition: opacity .5s ease;
}
.photo-column img.photo-swap{
	opacity: 0;
}
.photo-column.is-swapped img:not(.photo-swap){
	opacity: 0;
}
.photo-column.is-swapped img.photo-swap{
	opacity: 1;
}
@media (prefers-reduced-motion: reduce){
	.photo-column img{ transition: none; }
}

/* ============================================================
   TEXT — "Doutor" (eyebrow)
   ============================================================ */
.eyebrow{
	font-family: 'Source Serif 4', Georgia, serif;
	font-style: italic;
	font-size:1.05em;
	color: var(--text-muted);
	font-weight:500;
	margin-block: 0 6px;
}

/* ============================================================
   TEXT — "Alcides Araújo" (h1)
   ============================================================ */
h1{
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight:600;
	font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.6rem); /* fluid: scales smoothly instead of jumping at the mobile breakpoint */
	line-height:1.15;
	margin-block: 0 20px;
	color: var(--text-white);
}

/* ============================================================
   DIVIDER
   ============================================================ */
h1::after{
	content:"";
	display:block;
	width: 72px;
	height: 4px;
	margin-block-start: 14px;
	border-top: 1px solid var(--accent-gold);
	border-bottom: 1px solid var(--accent-gold);
}

/* ============================================================
   TEXT — info list (specialty / license / city / WhatsApp)
   ============================================================ */
.details-list{
	list-style:none;
	margin-block: 0 26px;
	padding-inline-start:0;
	display:flex;
	flex-direction:column;
	gap:9px;
	font-size:1.07em;
	color: var(--text-muted);
}
.details-list li{
	display:flex;
	align-items:center;
	gap:9px;
}
.details-list .emoji{ font-size: 1em; flex: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.call-to-action{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	width:100%;
	padding:14px 20px;
	border-radius:12px;
	font-family:'Inter', system-ui, sans-serif;
	font-size:1.07em;
	font-weight:500;
	text-decoration:none;
	border:none;
	background: var(--button-bg);
	color: var(--text-white);
	transition: background .15s ease, transform .15s ease;
	margin-block-end: 22px;
}
.call-to-action:hover{ background: var(--button-hover); transform: translateY(-1px); }
.call-to-action svg{
	width:18px;
	height:18px;
	flex:none;
	color: var(--button-icon);
	fill: currentColor;
}

/* ============================================================
   ICONS
   ============================================================ */
.socials{
	display:flex;
	align-items:center;
	gap:12px;
}
.socials a{
	width:42px; height:42px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color: var(--icon-fg);
	transition: transform .15s ease, filter .15s ease;
}
.socials a:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.socials svg{ width:19px; height:19px; }
.social svg{ fill: currentColor; }
.social--whatsapp{ background: var(--icon-whatsapp); }
.social--instagram{ background: var(--icon-instagram); }
.socials a.social--linkedin{ background: var(--icon-linkedin); }
.social--linkedin .ln-frame{ fill: var(--icon-linkedin); }
.social--linkedin .ln-letters{ fill: var(--icon-fg); }
.social--location{ background: var(--icon-location); }

/* ============================================================
   ACCESSIBILITY — visible focus ring for keyboard navigation,
   without adding a distracting ring on mouse click
   ============================================================ */
.call-to-action:focus-visible,
.socials a:focus-visible{
	outline: 2px solid var(--button-icon);
	outline-offset: 2px;
}

/* language switcher — small, discreet, top-right corner of the card */
.language-switch{
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	gap: 10px;
	font-size: 0.8em;
}
.language-switch a{
	color: var(--text-muted);
	text-decoration: none;
	opacity: 0.75;
	transition: opacity .15s ease, color .15s ease;
}
.language-switch a:hover{ opacity: 1; }
.language-switch a[aria-current="page"]{
	opacity: 1;
	color: var(--text-white);
	font-weight: 600;
}
.language-switch a:focus-visible{
	outline: 2px solid var(--button-icon);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
	.call-to-action, .socials a{ transition:none; }
	.card{ animation:none; }
}

/* ============================================================
   MOBILE — combines Page/Container/Text mobile overrides
   Carrd → Page Mobile: Padding 1.5/1.5 · Size 11
   Carrd → Container Mobile: Layout Stack · Padding 3/2.5
   ============================================================ */
@media (max-width: 720px){
	body{ font-size: 11px; } /* Page Mobile → Size 11 */
	.card{
		grid-template-columns: 1fr;
		width: 92vw; /* on mobile Carrd uses near-full width, not 55% */
		max-width: 420px;
		min-width: 0;
	}
	.photo-column{ order: 1; min-height: 280px; }
	.text-column{ order: 2; padding: 32px 26px; }
}