/* ==========================================================================
   NUMIC — Conference 2026 (page-conference-2026.php)
   Usa los tokens de numic.css (--nm-*). Solo clases .cf-*
   ========================================================================== */

.cf {
	--cf-orange-ink: #b8431a;   /* naranja con contraste para texto pequeño */
	--cf-green-ink: #2f7a4c;    /* verde con contraste para texto pequeño */
	--cf-green-deep: #3b8757;
	--cf-radius: 14px;
	color: var(--nm-navy);
	font-family: var(--nm-font);
	overflow-x: clip;
}
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
.cf :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }
.cf :where(ul, ol) { list-style: none; }
.cf :where(h1, h2, h3, p, b, span, a, li) { font-family: var(--nm-font); }
.cf-sec { padding: clamp(56px, 7vw, 104px) 0; }
.cf [id] { scroll-margin-top: 24px; }

/* ---- Hero ------------------------------------------------------------- */
.cf-hero {
	position: relative; isolation: isolate; color: #fff;
	background: linear-gradient(100deg, var(--cf-green-deep) 0%, var(--cf-green-deep) 55%, var(--nm-green) 100%);
	padding: clamp(56px, 8vw, 128px) 0 clamp(96px, 11vw, 168px);
	overflow: hidden;
}
.cf-hero::after {
	content: ""; position: absolute; right: -4%; top: -10%; bottom: -10%; width: min(58vw, 780px); z-index: -1; opacity: .9;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%2374b58a' stroke-width='1.4'%3E%3Cpath d='M300 60l110-50 90 80-30 130-150 20zM520 110l120-50 80 140-120 110-170-70zM340 250l140-20 70 150-100 100-150-80zM90 330l130-60 90 90-60 140-150-30zM300 60l40 190M500 90l20 20M480 230l-140 20M220 270l120-20M310 360l-60 140M550 380l-110 100'/%3E%3C/g%3E%3Cg fill='%23fd6c35'%3E%3Ccircle cx='550' cy='120' r='7'/%3E%3Ccircle cx='340' cy='250' r='5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fd6c35' stroke-width='2'%3E%3Ccircle cx='300' cy='60' r='9'/%3E%3Ccircle cx='220' cy='270' r='8'/%3E%3C/g%3E%3C/svg%3E") no-repeat right center / contain;
}
.cf-hero__in { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.8vw, 22px); }
.cf-hero__kicker { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--nm-navy); }
.cf-hero__title { font-size: clamp(2.1rem, 5.2vw, 4.2rem); line-height: 1.06; font-weight: 700; color: #f1f5dc; max-width: 15em; text-wrap: balance; }
.cf-hero__date { display: inline-block; background: var(--nm-navy); color: var(--nm-cream); font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 600; padding: 9px 20px; margin-top: 6px; }
.cf-hero__place { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 500; line-height: 1.35; max-width: 30em; }
.cf-hero__place svg { flex: none; margin-top: 1px; }
.cf-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 14px; }
.cf-hero .cf-btn { color: #fff; border-color: #fff; }
.cf-hero .cf-btn:hover { background: #fff; border-color: #fff; color: var(--cf-green-ink); }
.cf-link { color: #fff; font-weight: 600; font-size: .98rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; min-height: 44px; display: inline-flex; align-items: center; }
.cf-link:hover { color: var(--nm-navy); }

/* ---- Datos clave (tira superpuesta) ------------------------------------ */
.cf-facts-wrap { position: relative; z-index: 2; margin-top: calc(-1 * clamp(52px, 6vw, 84px)); }
.cf-facts {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: var(--cf-radius);
	box-shadow: 0 18px 48px rgba(35, 55, 70, .16); overflow: hidden;
}
.cf-fact { display: flex; gap: 16px; align-items: flex-start; padding: clamp(20px, 2.2vw, 30px); border-left: 1px solid var(--nm-line); }
.cf-fact:first-child { border-left: 0; }
.cf-fact__ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--nm-mint); color: var(--cf-green-ink); }
.cf-fact:nth-child(3) .cf-fact__ico { background: var(--nm-peach); color: var(--cf-orange-ink); }
.cf-fact__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-fact__txt b { font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--cf-green-ink); }
.cf-fact:nth-child(3) .cf-fact__txt b { color: var(--cf-orange-ink); }
.cf-fact__txt span { font-size: 1rem; line-height: 1.35; font-weight: 500; }

/* ---- Sobre la conferencia ---------------------------------------------- */
.cf-about { background: #fff; padding-top: clamp(64px, 8vw, 112px); }
.cf-about__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cf-about__lead { font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.22; font-weight: 600; color: var(--nm-navy); text-wrap: balance; position: sticky; top: 24px; }
.cf-prose { display: flex; flex-direction: column; gap: 1.2em; font-size: 1.06rem; line-height: 1.7; color: #2f4251; }

/* ---- Keynotes ----------------------------------------------------------- */
.cf-keynotes { background: var(--nm-cream); position: relative; }
.cf-speakers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.cf-speaker { display: flex; background: #fff; border-radius: var(--cf-radius); overflow: hidden; box-shadow: 0 1px 0 var(--nm-line); border: 1px solid var(--nm-line); }
.cf-speaker__photo { flex: 0 0 38%; position: relative; background: var(--nm-sage); }
.cf-speaker__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.cf-speaker__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--nm-green), var(--nm-orange)); }
.cf-speaker__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 30px); min-width: 0; }
.cf-tag { align-self: flex-start; background: var(--nm-mint); color: #1f5a39; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 6px; line-height: 1; }
.cf-speaker__name { font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.1; font-weight: 700; color: var(--nm-navy); }
.cf-speaker__org { display: flex; flex-direction: column; gap: 2px; font-size: .95rem; line-height: 1.35; color: var(--cf-green-ink); }
.cf-speaker__org b { font-weight: 600; }
.cf-speaker__org span { color: #4a5c6b; }
.cf-speaker__bio { font-size: .98rem; line-height: 1.62; color: #2f4251; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--nm-line); }

/* ---- Temas -------------------------------------------------------------- */
.cf-topics { background: #fff; }
.cf-topics__intro { font-size: 1.12rem; line-height: 1.6; color: #2f4251; max-width: 46em; margin: -8px 0 clamp(26px, 3vw, 44px); }
.cf-topics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); counter-reset: cf; }
.cf-topic { display: flex; gap: clamp(16px, 2vw, 26px); align-items: flex-start; padding: clamp(20px, 2.2vw, 30px); border-radius: var(--cf-radius); background: var(--nm-cream); border: 1px solid var(--nm-line); }
.cf-topic__n { flex: none; font-size: clamp(2rem, 3vw, 2.8rem); line-height: .95; font-weight: 700; color: var(--nm-orange); min-width: 1.5em; letter-spacing: -.02em; }
.cf-topic:nth-child(3n+2) .cf-topic__n { color: var(--nm-green); }
.cf-topic:nth-child(3n) .cf-topic__n { color: var(--nm-navy); }
.cf-topic h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 600; margin-bottom: 8px; color: var(--nm-navy); }
.cf-topic p { font-size: .96rem; line-height: 1.6; color: #3a4d5b; }

/* ---- Fechas clave ------------------------------------------------------- */
.cf-dates { background: var(--nm-cream); }
.cf-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); position: relative; }
.cf-step { background: #fff; border: 1px solid var(--nm-line); border-top: 5px solid var(--nm-orange); border-radius: var(--cf-radius); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 18px; }
.cf-step:nth-child(2) { border-top-color: var(--nm-green); }
.cf-step--event { background: var(--nm-navy); border-color: var(--nm-navy); border-top-color: var(--nm-orange); color: #fff; }
.cf-step__date { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cf-step__mon { font-size: 1.1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cf-orange-ink); }
.cf-step:nth-child(2) .cf-step__mon { color: var(--cf-green-ink); }
.cf-step__day { font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: .95; font-weight: 700; letter-spacing: -.02em; }
.cf-step__yr { font-size: 1rem; font-weight: 500; color: #4a5c6b; }
.cf-step--event .cf-step__mon { color: #ffb08f; }
.cf-step--event .cf-step__yr { color: #c7d3dc; }
.cf-step__label { display: flex; flex-direction: column; gap: 4px; font-size: 1.02rem; line-height: 1.35; }
.cf-step__label b { font-weight: 600; }
.cf-step__label span { color: #4a5c6b; }
.cf-step--event .cf-step__label span { color: #c7d3dc; }
.cf-free { margin-top: clamp(22px, 3vw, 36px); display: inline-block; background: var(--nm-mint); color: #1f5a39; font-weight: 600; font-size: 1.05rem; padding: 11px 20px; border-radius: 8px; }

/* ---- Cómo enviar -------------------------------------------------------- */
.cf-submit { background: #fff; }
.cf-submit__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cf-submit__lead { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.35; font-weight: 600; max-width: 28em; }
.cf-submit__sub { margin: 22px 0 12px; font-size: 1.02rem; color: #3a4d5b; }
.cf-checks { display: flex; flex-direction: column; gap: 10px; }
.cf-checks li { position: relative; padding-left: 36px; font-size: 1.05rem; line-height: 1.45; }
.cf-checks li::before { content: ""; position: absolute; left: 0; top: .1em; width: 22px; height: 22px; border-radius: 50%; background: var(--nm-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cf-card { background: var(--nm-navy); color: #fff; border-radius: var(--cf-radius); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: relative; overflow: hidden; }
.cf-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; border: 1.5px solid rgba(207, 220, 186, .25); box-shadow: 0 0 0 28px rgba(207, 220, 186, .06); pointer-events: none; }
.cf-card__k { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #ffb08f; }
.cf-card__big { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.05; color: #f1f5dc; }
.cf-btn { margin-top: 6px; }
.cf-btn--solid { background: var(--nm-orange); border-color: var(--nm-orange); color: var(--nm-navy); font-weight: 700; }
.cf-btn--solid:hover { background: #fff; border-color: #fff; color: var(--nm-navy); }
.cf-card__alt { font-size: .95rem; line-height: 1.5; color: #c7d3dc; position: relative; z-index: 1; }
.cf-card__alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; white-space: nowrap; }
.cf-card__alt a:hover { color: #ffb08f; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
	.cf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cf-fact:nth-child(3) { border-left: 0; }
	.cf-fact:nth-child(n+3) { border-top: 1px solid var(--nm-line); }
	.cf-speakers { grid-template-columns: 1fr; }
	.cf-about__cols { grid-template-columns: 1fr; }
	.cf-about__lead { position: static; }
}
@media (max-width: 900px) {
	.cf-topics__grid, .cf-submit__in { grid-template-columns: 1fr; }
	.cf-timeline { grid-template-columns: 1fr; }
	.cf-hero::after { opacity: .5; width: 90vw; }
}
@media (max-width: 600px) {
	.cf-facts { grid-template-columns: 1fr; }
	.cf-fact, .cf-fact:nth-child(3) { border-left: 0; }
	.cf-fact + .cf-fact { border-top: 1px solid var(--nm-line); }
	.cf-speaker { flex-direction: column; }
	.cf-speaker__photo { flex: none; aspect-ratio: 4 / 3; }
	.cf-speaker__photo img { object-position: 50% 20%; }
	.cf-topic { flex-direction: column; gap: 8px; }
	.cf-hero__cta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
	.cf-speaker, .cf-topic, .cf-step { transition: transform .25s ease, box-shadow .25s ease; }
	.cf-speaker:hover, .cf-topic:hover, .cf-step:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(35, 55, 70, .12); }
}

/* ---- Idiomas ES / EN ------------------------------------------------------ */
.cf cf-t { display: inline; font-style: normal; }
.cf cf-t[data-l="en"] { display: none; }
html[data-cf="en"] .cf cf-t[data-l="es"] { display: none; }
html[data-cf="en"] .cf cf-t[data-l="en"] { display: inline; }
