/* ==========================================================================
Codfy Website — estilos propios, desde cero (sin Bootstrap ni Odoo assets)
Estado actual: LIENZO EN BLANCO. Solo quedan el chrome del sitio
(header + footer) y las utilidades que reutiliza /shop. Todo el contenido
de pruebas (hero, 10 bloques animados, réplica del backend) fue eliminado.
========================================================================== */
/* --------------------------------------------------------------------------
TIPOGRAFÍA — Altone (Eko Bimantara), fuente ÚNICA del sitio.
Los .TTF originales de la licencia viven en static/src/font/; de ahí se
generaron los .woff2 que se sirven (misma carpeta, ~25 KB cada uno frente a
los ~72 KB del TTF). Para regenerar tras cambiar un archivo:
python3 -c "from fontTools.ttLib import TTFont; f=TTFont('ALTONE-X.TTF'); f.flavor='woff2'; f.save('Altone-X.woff2')"
OJO: la familia entregada NO trae Bold (700) vertical — solo SemiBold (600)
y ExtraBold (800). Por eso el CSS del sitio pide 600 donde llevaría negrita.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Altone";
src: url("/c_website/static/src/font/Altone-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Altone";
src: url("/c_website/static/src/font/Altone-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Altone";
src: url("/c_website/static/src/font/Altone-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Altone";
src: url("/c_website/static/src/font/Altone-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Altone";
src: url("/c_website/static/src/font/Altone-MediumOblique.woff2") format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap;
}
/* Bold sí existe, pero SOLO oblicuo (ALTONE-BOLDOBLIQUE.TTF, usWeightClass 700,
subfamilia "Bold Italic"). Se declara con font-style: italic para que
`font-weight:700; font-style:italic` case exacto — es el del título del hero. */
@font-face {
font-family: "Altone";
src: url("/c_website/static/src/font/Altone-BoldOblique.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
:root {
/* ======================================================================
PALETA ESTÁNDAR DEL SITIO — definida por el cliente.
Es la ÚNICA fuente de verdad del color: no escribir hex sueltos en el
resto del archivo, siempre var(--cf-*).
---------------------------------------------------------------------
--cf-primary #0053FF botones y la palabra "Codfy" en negrita
--cf-text #000000 texto general
--cf-on-primary #FFFFFF texto sobre botones e iconos
--cf-ribbon #E2E2E2 gris del listón de logotipos
--cf-card #E5E5E5 tarjetas de "¿Cómo trabajamos?"
====================================================================== */
--cf-primary: #0053ff;
--cf-primary-2: #0041cc; /* hover del primario (derivado) */
--cf-text: #000000;
--cf-on-primary: #ffffff;
--cf-ribbon: #e2e2e2;
--cf-card: #e5e5e5;
--cf-sec4-bg: #f2f2f2; /* fondo de la 4ª sección */
--cf-panel: #d3d3d3; /* panel con muesca de la 4ª sección */
--cf-bg: #ffffff; /* fondo del sitio: blanco puro */
--cf-surface: #f7f8fa; /* footer (no está en la paleta del cliente) */
--cf-muted: #5b6472; /* texto secundario */
--cf-border: #e4e7ec; /* separadores */
--cf-nav-h: 72px; /* altura del header en reposo */
--cf-nav-h-sm: 60px; /* altura del header con scroll */
--cf-max: 1120px; /* ancho del contenido */
--cf-nav-max: 1800px; /* ancho del header: casi toda la pantalla */
--cf-font: "Altone", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Cuerpo ÚNICO de los títulos de sección: "¿Cómo trabajamos?",
"Digitaliza tu empresa…", "¡Nuestros Servicios!" y el reclamo del CTA.
Se toca aquí y cambian los cuatro a la vez. El del hero va aparte y más
grande a propósito: es el título de la página. */
--cf-title: clamp(34px, 3.9vw, 58px);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
/* Fuente ÚNICA de todo el sitio: Altone. !important para imponerse sobre la
fuente de tema de Odoo en las páginas de website_sale. Los iconos
FontAwesome conservan su fuente por especificidad (su propia regla .fa gana). */
body {
background: var(--cf-bg);
color: var(--cf-text);
font-family: var(--cf-font) !important;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Odoo pinta sus propios font-family en botones, inputs y encabezados de
website_sale: los reenganchamos a la fuente del sitio. */
button, input, select, textarea,
h1, h2, h3, h4, h5, h6 { font-family: var(--cf-font); }
/* Odoo pinta fondo propio en estos contenedores del layout: los forzamos a
blanco para que no se cuele ningún gris del tema. */
#wrapwrap,
#wrapwrap > main { background: var(--cf-bg); }
/* :hover/:focus explícitos: Bootstrap (que Odoo carga) subraya los enlaces al
pasar el mouse, y la regla `a { text-decoration: none }` sola no lo tapa. */
a, a:hover, a:focus { color: inherit; text-decoration: none; }
/* ==========================================================================
HEADER — fijo, acompaña la página en todo el scroll.
Dos estados: reposo (transparente, sin sombra) y .cf-nav--scrolled
(blanco translúcido, sombra y un poco más compacto). La clase la pone
app.js a partir de los ~24px de scroll.
========================================================================== */
.cf-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--cf-nav-h);
background: transparent;
border-bottom: 1px solid transparent;
transition: height .25s ease,
background-color .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
/* Al ser fixed no ocupa sitio en el flujo: se lo devolvemos al contenido. */
#wrapwrap > main { padding-top: var(--cf-nav-h); }
.cf-nav--scrolled {
height: var(--cf-nav-h-sm);
background: rgba(255, 255, 255, .85);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom-color: var(--cf-border);
box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
0 10px 28px -20px rgba(16, 24, 40, .45);
}
/* Navegador sin backdrop-filter: fondo blanco sólido (mismo resultado visual). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.cf-nav--scrolled { background: #ffffff; }
}
/* Rejilla del header: logo | menú | acciones.
Los dos laterales comparten el mismo `flex: 1 1 0`, así que el menú queda
centrado respecto a la ventana y no respecto al espacio sobrante. */
.cf-nav__inner {
/* El header NO se ciñe a --cf-max (1120px) como el resto del contenido:
ocupa casi todo el ancho de la pantalla, solo con aire en los costados. */
max-width: var(--cf-nav-max);
height: 100%;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
}
.cf-nav__side {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
}
.cf-nav__side--end { justify-content: flex-end; gap: 14px; }
/* flex: 0 0 auto en logo, botón y hamburguesa: en pantallas muy estrechas
(320 px) el flex los comprimía y deformaba. */
.cf-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cf-nav__cta, .cf-nav__burger { flex: 0 0 auto; }
/* Logotipo real (static/src/img/logo.png). Alto fijo, ancho por proporción. */
.cf-nav__logo {
display: block;
height: 34px;
width: auto;
transition: height .25s ease;
}
.cf-nav--scrolled .cf-nav__logo { height: 28px; }
/* Sin `height` aquí: el 100% que necesita el escritorio (para que los
desplegables arranquen al borde inferior del header) vive en el media
query de ≥821px. En móvil el panel debe crecer con su contenido. */
.cf-nav__menu {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 32px;
}
/* Elementos de menú: Altone Regular (400) */
.cf-nav__link {
color: var(--cf-muted);
font-size: 15px;
font-weight: 400;
transition: color .15s ease;
}
.cf-nav__link:hover { color: var(--cf-text); }
/* ---------- Desplegables (sin JS) ----------
Dos comportamientos SEPARADOS POR BREAKPOINT, nunca mezclados:
· ≥821px → panel flotante que abre con hover/foco (bloque de más abajo)
· ≤820px → acordeón dentro del menú hamburguesa (bloque RESPONSIVE)
Están en @media excluyentes a propósito: cuando las reglas de escritorio
vivían fuera del media query, el `transform: translate(-50%)` del hover
seguía aplicándose en móvil y sacaba el submenú de la pantalla. */
/* Checkbox de estado: invisible pero enfocable, así el teclado también abre
el acordeón en móvil (Tab + Espacio). No usar display:none. */
.cf-sub__checkbox {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.cf-sub__checkbox:focus-visible ~ .cf-nav__link--parent {
outline: 2px solid var(--cf-primary);
outline-offset: 4px;
border-radius: 4px;
}
.cf-nav__link--parent {
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.cf-caret {
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform .2s ease;
}
.cf-nav__dropdown { display: flex; flex-direction: column; }
.cf-nav__sublink {
font-size: 15px;
font-weight: 400;
color: var(--cf-muted);
transition: background .15s ease, color .15s ease;
}
.cf-nav__sublink:hover {
background: rgba(0, 83, 255, .07);
color: var(--cf-primary);
}
/* ---------- ESCRITORIO: panel flotante con hover ---------- */
@media (min-width: 821px) {
.cf-nav__menu { height: 100%; }
/* El item ocupa TODO el alto del header para que el panel arranque justo
en su borde inferior: si quedara un hueco, el puntero perdería el hover
al bajar del texto al panel. */
.cf-nav__item {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.cf-nav__dropdown {
position: absolute;
top: 100%;
left: 50%;
min-width: 216px;
padding: 8px;
background: var(--cf-bg);
border: 1px solid var(--cf-border);
border-radius: 14px;
box-shadow: 0 12px 32px -12px rgba(14, 13, 50, .22);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cf-nav__item:hover .cf-nav__dropdown,
.cf-nav__item:focus-within .cf-nav__dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.cf-nav__item:hover .cf-caret,
.cf-nav__item:focus-within .cf-caret { transform: rotate(-135deg) translate(-1px, -1px); }
.cf-nav__item:hover > .cf-nav__link--parent { color: var(--cf-text); }
.cf-nav__sublink {
padding: 9px 12px;
border-radius: 9px;
white-space: nowrap;
}
}
/* Botón "Iniciar sesión": Altone Medium (500).
Píldora delgada: texto grande con poco aire alrededor. El line-height
ajustado es lo que de verdad adelgaza el botón (el 1.6 del body lo
engordaba casi 10 px por sí solo). */
.cf-nav__cta {
padding: 4px 16px;
border-radius: 999px;
background: var(--cf-primary);
color: var(--cf-on-primary) !important;
font-weight: 500;
font-size: 17px;
line-height: 1.35;
white-space: nowrap;
transition: background .15s ease;
}
.cf-nav__cta:hover { background: var(--cf-primary-2); }
/* --------------------------------------------------------------------------
SESIÓN INICIADA — desplegable de usuario.
El marcado lo pone `portal.user_dropdown` de Odoo; aquí solo se le da el
aspecto del navbar. La apertura/cierre la maneja el JS de Bootstrap que ya
viene en web.assets_frontend, por eso no hay JS propio.
-------------------------------------------------------------------------- */
.cf-nav__user {
flex: 0 0 auto;
list-style: none;
margin: 0;
padding: 0;
}
.cf-nav__userlink {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 14px 4px 4px;
border: 1px solid var(--cf-border);
border-radius: 999px;
color: var(--cf-text) !important;
font-weight: 500;
font-size: 16px;
line-height: 1.35;
white-space: nowrap;
text-decoration: none;
transition: border-color .15s ease, background .15s ease;
}
.cf-nav__userlink:hover { border-color: var(--cf-primary); background: var(--cf-surface); }
/* Alto fijo: el avatar llega como y sin esto el
navbar da un salto cuando la imagen termina de cargar. */
.cf-nav__avatar {
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 50%;
object-fit: cover;
}
.cf-nav__username {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cf-nav__usermenu {
border: 1px solid var(--cf-border);
border-radius: 12px;
padding: 6px;
margin-top: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
font-size: 15px;
}
.cf-nav__usermenu .dropdown-item { border-radius: 8px; padding: 8px 12px; }
.cf-nav__usermenu .dropdown-item:active { background: var(--cf-primary); color: var(--cf-on-primary); }
/* En móvil el nombre estorba junto a la hamburguesa: queda solo el avatar. */
@media (max-width: 991px) {
.cf-nav__username { display: none; }
.cf-nav__userlink { padding: 4px; border-color: transparent; }
}
/* Menú móvil por CSS puro (sin JS) */
.cf-nav__checkbox,
.cf-nav__burger { display: none; }
/* ==========================================================================
HERO PRINCIPAL — texto a la izquierda, imágenes a la derecha.
Comparte el ancho del header (--cf-nav-max + 40px de aire), NO el ancho de
contenido --cf-max, para que ambos bloques queden alineados en pantalla.
========================================================================== */
/* El hero es el lienzo del cuarto de anillo, anclado a su esquina inferior
derecha (el borde inferior es justo donde empieza el listón de logos). */
.cf-hero {
position: relative;
overflow: hidden;
}
.cf-hero__arc {
position: absolute;
z-index: 2; /* por ENCIMA del círculo lila */
right: 0;
bottom: 0;
width: clamp(140px, 19vw, 310px);
height: auto;
color: var(--cf-primary); /* el path usa currentColor */
pointer-events: none;
}
.cf-hero__inner {
position: relative;
z-index: 1; /* el contenido, por encima del anillo */
max-width: var(--cf-nav-max);
margin: 0 auto;
padding: 72px 40px 96px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
/* Título: Altone Bold Oblique (700 + italic) */
.cf-hero__title {
margin: 0 0 24px;
font-size: clamp(34px, 4.4vw, 66px);
font-weight: 700;
font-style: italic;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--cf-text);
/* Sin `text-wrap: balance`: los cortes de línea son explícitos ( en
la plantilla) y el balanceo automático los pelearía. */
}
/* La palabra "odoo" del título es el logotipo. En `em` para que escale con el
título; el ajuste vertical lo alinea con la base del texto. */
.cf-hero__odoo {
display: inline-block;
/* .52em + 20px medidos en escritorio (título a 63.36px → 20/63.36 = .32em).
Se mantiene en `em` para que siga escalando con el título. */
height: .84em;
width: auto;
vertical-align: baseline;
margin: 0 .06em;
}
/* Bajada: Altone Medium (500) */
.cf-hero__sub {
margin: 0;
max-width: 620px;
font-size: clamp(16px, 1.15vw, 20px);
font-weight: 500;
line-height: 1.55;
color: var(--cf-muted);
}
/* Botón "Conocer más": misma píldora que el de sesión, con un resplandor
detrás. El brillo es una copia del propio botón desenfocada y desplazada
hacia abajo (::before con z-index:-1), no un box-shadow: así el halo tiene
la forma exacta de la píldora y puede desbordarla como una luz real. */
.cf-hero__cta {
position: relative;
display: inline-flex;
align-items: center;
margin-top: 36px;
/* Más aire que el botón del header: este es el CTA principal de la página */
padding: 15px 36px;
border-radius: 999px;
background: var(--cf-primary);
color: var(--cf-on-primary) !important;
font-size: 17px;
font-weight: 500;
font-style: italic; /* Altone Medium Oblique */
line-height: 1.35;
white-space: nowrap;
isolation: isolate; /* contiene el z-index:-1 del halo */
transition: background .18s ease, transform .18s ease;
}
.cf-hero__cta::before {
content: "";
position: absolute;
z-index: -1;
inset: 4px 6px -10px; /* desplazado hacia abajo: luz por detrás */
border-radius: inherit;
background: var(--cf-primary);
filter: blur(18px);
opacity: .55;
transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.cf-hero__cta:hover { background: var(--cf-primary-2); transform: translateY(-1px); }
.cf-hero__cta:hover::before { opacity: .8; filter: blur(24px); transform: scale(1.06); }
/* Quien pida menos movimiento conserva el halo, pero sin desplazamientos. */
@media (prefers-reduced-motion: reduce) {
.cf-hero__cta, .cf-hero__cta::before { transition: none; }
.cf-hero__cta:hover { transform: none; }
.cf-hero__cta:hover::before { transform: none; }
}
/* Columna derecha: escenario de la composición por capas. La imagen base va
en el flujo y define el alto; las capas siguientes irán en absoluto sobre
ella (por eso el position: relative). */
/* El escenario mide la mitad de la columna (y va centrado): así el círculo
marca el tamaño de la composición y las capas que se monten encima siguen
usando sus mismas coordenadas. */
/* El círculo se estira al alto de la columna de texto (align-self: stretch),
nunca al revés: así el alto del hero lo sigue mandando el texto y agrandar
la imagen NO puede añadir scroll. Los márgenes negativos le dan 96px extra
invadiendo el padding del hero, también sin alterar el alto de la fila.
La proporción es la del PNG (7054x8046), así que la caja coincide con el
círculo y las capas que se monten encima conservan sus coordenadas. */
/* Clave: manda la ALTURA, no el ancho. La columna se estira al alto de la
fila (que fija el texto) y el círculo se dimensiona por esa altura, con el
ancho derivado de su proporción. Así agrandarlo NUNCA puede alargar el hero
ni añadir scroll. Los márgenes negativos le regalan 112px extra invadiendo
el padding del hero, que también es alto ya existente.
(Con `aspect-ratio` en la caja pasaba lo contrario: mandaba el ancho de la
columna y el hero crecía de 686 a 816px.) */
.cf-hero__media {
position: relative;
align-self: center;
/* Márgenes negativos: el círculo invade el padding del hero, alto que ya
existía. Así crece bastante más de lo que alarga la sección. */
margin: -40px 0 -72px;
display: flex;
justify-content: center;
min-width: 0;
}
/* Mide exactamente el círculo: es el sistema de coordenadas de las capas
que se monten encima (van dentro, en absoluto). */
.cf-hero__stack {
position: relative;
width: 89%;
max-width: 100%;
/* Desplazado 50px a la derecha. Con transform y no con margen: no altera
la maquetación, así que no puede provocar desbordes ni recolocar nada. */
transform: translateX(50px);
}
.cf-hero__img--base {
display: block;
width: 100%;
height: auto;
}
/* Contenedores de capa: guardan la POSICIÓN. La imagen de dentro se deja
libre para GSAP (entrada y hover), así una cosa no pisa a la otra.
La sombra vive en la imagen para que acompañe al escalar en el hover. */
.cf-hero__layer > img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 clamp(5px, 1.25vw, 18px) clamp(8px, 1.8vw, 26px) rgba(14, 13, 50, .28));
will-change: transform;
}
.cf-hero__layer--phone > img {
height: 100%;
width: auto;
filter: none; /* el mockup ya trae su propia sombra */
}
/* Capa 3: tarjeta de Odoo, encima del móvil y anclada arriba a la izquierda.
La sombra va con drop-shadow y no con box-shadow: el PNG es una tarjeta
girada en 3D con transparencia, y drop-shadow sigue el contorno real del
canal alfa en vez de dibujar un rectángulo. */
.cf-hero__layer--card {
position: absolute;
z-index: 2;
top: 6%;
/* Anclada en % (no en px) para que acompañe al círculo al escalar. Un 20%
la deja montada sobre la mitad superior del móvil, no al ras de su
borde izquierdo. */
left: 20%;
width: 50%;
height: auto;
/* En % del propio elemento (no en px): el % escala con la imagen, así la
composición se mantiene idéntica en cualquier tamaño de círculo.
Equivale a los -50px/-25px medidos en escritorio. */
transform: translate(-17.24%, -10.55%);
}
/* Capa 4: tarjetas de indicadores, en la parte baja del móvil. */
.cf-hero__layer--stats {
position: absolute;
z-index: 2;
bottom: 6%;
left: 20%;
width: 48.4%; /* 52% → −15% → +10% */
height: auto;
/* En % del propio elemento, igual que la tarjeta superior: escala con el
círculo en vez de quedarse en píxeles fijos.
El -74.15% vertical es el valor exacto para que la caja de esta imagen
quede JUSTO por debajo de la tarjeta 4, sin solaparla, en cualquier
ancho de pantalla. */
transform: translate(-46.26%, -74.15%); /* 20px a la derecha */
}
/* Capa 2: el móvil, centrado sobre el círculo y algo más alto que él para
que sobresalga por arriba y por abajo. */
.cf-hero__layer--phone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 86%; /* 112% → −30% → +10% */
width: auto;
max-width: none;
}
/* ==========================================================================
LISTÓN DE CONFIANZA — banda gris a todo el ancho, con marquesina infinita
========================================================================== */
.cf-trust {
width: 100%;
background: var(--cf-ribbon);
border-top: 1px solid var(--cf-border);
border-bottom: 1px solid var(--cf-border);
}
/* El contenido se alinea con el header y el hero (mismo ancho máximo) aunque
la banda gris sangre de borde a borde. */
.cf-trust__inner {
max-width: var(--cf-nav-max);
margin: 0 auto;
padding: 22px 40px;
display: flex;
align-items: center;
gap: 40px;
}
/* Rótulo: Altone Medium Oblique (500 + italic) */
.cf-trust__label {
flex: 0 0 auto;
margin: 0;
font-size: 15px;
font-weight: 500;
font-style: italic;
line-height: 1.3;
color: var(--cf-text); /* negro de la paleta, no el gris secundario */
text-align: center; /* "en nosotros" centrado bajo la primera línea */
white-space: nowrap;
}
/* Ventana de la marquesina. El degradado de máscara difumina los logos al
entrar y salir, en vez de cortarlos en seco contra el borde. */
.cf-trust__marquee {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px,
#000 calc(100% - 48px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 48px,
#000 calc(100% - 48px), transparent 100%);
}
/* Pista: dos grupos idénticos en fila. Al desplazarse -50% (el ancho exacto
de un grupo) el segundo cae donde estaba el primero y el ciclo es continuo,
sin salto visible. */
.cf-trust__track {
display: flex;
width: max-content;
animation: cf-marquee 34s linear infinite;
will-change: transform;
}
.cf-trust__group {
display: flex;
align-items: center;
gap: 56px;
padding-right: 56px; /* mismo hueco entre el último y el primero */
}
.cf-trust__marquee:hover .cf-trust__track { animation-play-state: paused; }
@keyframes cf-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Logos. Caja común de 140x44 con `max-*` en vez de alto fijo: unos son
palabras muy anchas (Innovando, Inflexyon) y otros casi cuadrados (Snack
Box), y con un solo alto fijo los anchos se irían a 230px o a 35px. Al
limitar las DOS medidas, cada logo entra en la misma caja y todos pesan
ópticamente lo mismo. Los archivos van exportados al doble (280x88), así
que se dibujan justo a la mitad y se ven nítidos en pantallas retina.
`width/height: auto` y no `object-fit`: así el elemento mide lo que mide el
logo y los huecos entre ellos quedan iguales, sin bandas vacías. */
.cf-trust__logo {
flex: 0 0 auto;
max-width: 140px;
max-height: 44px;
width: auto;
height: auto;
}
@media (prefers-reduced-motion: reduce) {
.cf-trust__track { animation: none; }
}
/* ==========================================================================
¿CÓMO TRABAJAMOS? — bloque centrado
========================================================================== */
/* Ancho amplio: el párrafo lleva cortes de línea explícitos y necesita sitio
para resolverse en 3 líneas sin que el navegador las parta por su cuenta. */
.cf-how__inner {
max-width: 1320px;
margin: 0 auto;
padding: 88px 40px;
text-align: center;
}
/* Título: Altone Bold Oblique (700 + italic), sin versalitas: se escribe tal
cual, solo con la C inicial en mayúscula. */
.cf-how__title {
margin: 0 0 24px;
font-size: var(--cf-title);
font-weight: 700;
font-style: italic;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--cf-text);
}
/* Cuerpo: Altone Medium (500) */
.cf-how__text {
margin: 0;
font-size: clamp(16px, 1.15vw, 19px);
font-weight: 500;
line-height: 1.65;
color: var(--cf-muted);
}
/* "Codfy" destacado en el azul del logotipo.
OJO: la familia no tiene Bold (700) VERTICAL — solo oblicuo. Al pedir 700
en estilo normal, el algoritmo de CSS Fonts busca primero pesos ≥700 y cae
en ExtraBold (800), que es una cara real: no hay negrita sintética. */
.cf-brand-word {
font-weight: 700;
color: var(--cf-primary);
}
/* ==========================================================================
CARRUSEL DE 3 TARJETAS — la central grande, las laterales pequeñas
========================================================================== */
/* La sección es el lienzo del arco: se posiciona para que el fondo azul se
ancle a su borde inferior y las tarjetas queden superpuestas encima. */
.cf-cards {
/* Ancho del arco, en vw para poder derivar su alto en los calc() de abajo.
La imagen mide 7054×2877 → proporción 2.45, así que alto = ancho / 2.45.
Los +200px lo agrandan a petición del cliente: como va anclado abajo y
la sección lo recorta, el arco crece hacia arriba y hacia los lados
(la cúpula sube 200/2.45 = 82px), sin dejar hueco por abajo. */
--cf-arc-w: calc(60vw + 200px);
position: relative;
overflow: hidden;
}
.cf-cards__inner {
position: relative;
z-index: 1; /* por encima del arco */
max-width: var(--cf-nav-max);
margin: 0 auto;
padding: 0 40px 72px;
}
/* Arco azul de fondo: a sangre de borde a borde, pegado abajo y conservando
su proporción. Absoluto, así que no aporta alto a la sección; si sobra,
se recorta por el overflow de .cf-cards. */
.cf-arc {
position: absolute;
z-index: 0;
bottom: 0;
left: 50%;
width: var(--cf-arc-w);
transform: translateX(-50%); /* centrado */
line-height: 0;
pointer-events: none;
}
.cf-arc__img {
display: block;
width: 100%;
height: auto;
}
/* Fila: flecha · escenario · flecha. Con los botones pegados a las tarjetas
en vez de anclados a los bordes del contenedor, que mide 1800px y los
dejaría a media pantalla de distancia. */
.cf-cards__carousel {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.cf-cards__nav {
flex: 0 0 auto;
/* Las laterales van escaladas a 0.87: su caja de layout es ~24px más
ancha que lo que se ve, y sin este acercamiento la flecha queda
flotando lejos de la tarjeta. */
margin: 0 -14px;
z-index: 2;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--cf-border);
border-radius: 50%;
background: #ffffff;
cursor: pointer;
box-shadow: 0 10px 24px -18px rgba(16, 24, 40, .55);
transition: background .15s ease, border-color .15s ease;
}
.cf-cards__nav:hover {
background: var(--cf-primary);
border-color: var(--cf-primary);
}
.cf-cards__nav:focus-visible {
outline: 2px solid var(--cf-primary);
outline-offset: 3px;
}
/* Chevron dibujado con bordes: sin iconos externos ni fuente de iconos. */
.cf-cards__chev {
width: 10px;
height: 10px;
border-right: 2px solid var(--cf-text);
border-bottom: 2px solid var(--cf-text);
transition: border-color .15s ease;
}
.cf-cards__nav:hover .cf-cards__chev { border-color: var(--cf-on-primary); }
/* El desplazamiento compensa que el chevron pesa hacia una esquina: así
queda ópticamente centrado dentro del círculo. */
.cf-cards__nav--prev .cf-cards__chev { transform: rotate(135deg) translate(-2px, -2px); }
.cf-cards__nav--next .cf-cards__chev { transform: rotate(-45deg) translate(-2px, -2px); }
/* Indicadores. OJO CON EL COLOR: a esta altura los puntos caen SOBRE el arco
azul (comprobado muestreando el píxel del fondo de 1025 a 2560px), así que
van en blanco — en azul sobre azul el activo desaparecía. Además el activo
se alarga, así que se distingue aunque el contraste falle. */
.cf-cards__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
margin-top: -8px; /* el escenario ya trae 40px de aire abajo */
}
.cf-cards__dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .5);
cursor: pointer;
transition: width .25s ease, background .25s ease;
}
.cf-cards__dot:hover { background: rgba(255, 255, 255, .78); }
.cf-cards__dot--active {
width: 26px;
background: var(--cf-on-primary);
cursor: default;
}
.cf-cards__dot:focus-visible {
outline: 2px solid var(--cf-primary);
outline-offset: 3px;
}
/* Las tres tarjetas miden lo mismo en el DOM; la diferencia de tamaño es un
`scale`. Así el reordenado se anima con transform (barato y fluido) y el
texto no se remaqueta al cambiar de posición. */
.cf-cards__stage {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
padding: 40px 0; /* sitio para que la central crezca sin recortarse */
}
/* OJO: escala y opacidad NO se declaran aquí. Las controla GSAP desde
app.js (es quien anima el reordenado), y si el CSS también escribiera
`transform` los dos se pisarían. Aquí solo va lo estático. */
.cf-card {
/* 0 1 (encoge) y no 0 0: entre 1025 y ~1250px las tres tarjetas suman más
que el contenedor, y con ancho fijo el overflow de la sección las
recortaba. min-width:0 permite que el contenido acompañe. */
flex: 0 1 372px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
background: var(--cf-card);
border: 1px solid var(--cf-border);
border-radius: 22px;
cursor: pointer;
transform-origin: center center;
transition: box-shadow .3s ease;
}
.cf-card--active {
box-shadow: 0 26px 54px -32px rgba(14, 13, 50, .45);
cursor: default;
z-index: 2;
}
/* Marco de la foto. Las tres imágenes están recortadas al MISMO tamaño
(924x494) y sin el margen transparente que traían horneado, por eso el
aspect-ratio es exactamente el suyo: así llenan la caja al píxel y el gris
de fondo no asoma por ningún borde (solo se ve mientras cargan).
El redondeado lo pone el CSS, no la imagen. */
.cf-card__media {
aspect-ratio: 924 / 494;
overflow: hidden;
border-radius: 14px;
background: #eef0f4;
}
.cf-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cf-card__title {
margin: 0;
font-size: 21px;
font-weight: 600;
line-height: 1.25;
color: var(--cf-text);
}
.cf-card__text {
margin: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.55;
color: var(--cf-muted);
}
/* Pie: icono a la izquierda y botón en la misma línea */
.cf-card__foot {
margin-top: auto;
padding-top: 6px;
display: flex;
align-items: center;
gap: 14px;
}
/* Icono de la tarjeta. Las imágenes ya traen su propio círculo de fondo, así
que aquí no hace falta ni borde ni relleno: solo el tamaño. */
.cf-card__icon {
flex: 0 0 auto;
display: block;
width: 44px;
height: 44px;
}
.cf-card__btn {
margin-left: auto; /* el icono queda a la izquierda y el botón pegado a la derecha */
padding: 9px 22px;
border-radius: 999px;
background: var(--cf-primary);
color: var(--cf-on-primary) !important;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
white-space: nowrap;
transition: background .15s ease;
}
.cf-card__btn:hover { background: var(--cf-primary-2); }
/* Frase de cierre bajo las tarjetas: Altone Medium Oblique, centrada,
a la mitad del tamaño anterior (32px → 16px en escritorio). */
.cf-cards__claim {
max-width: 820px;
margin: 28px auto 0;
font-size: clamp(14px, 1.1vw, 16px);
font-weight: 500;
font-style: italic;
line-height: 1.25;
letter-spacing: -0.01em;
text-align: center;
color: var(--cf-on-primary); /* cae sobre el arco azul */
}
/* ==========================================================================
SECCIÓN 4 — banda a sangre con fondo propio. Contenido pendiente.
========================================================================== */
.cf-sec4 {
width: 100%;
background: var(--cf-sec4-bg);
}
.cf-sec4__inner {
max-width: var(--cf-nav-max);
margin: 0 auto;
padding: 96px 40px;
}
/* Mismo tratamiento que el título de "¿Cómo trabajamos?": Altone Bold Oblique,
centrado. Los saltos de línea son explícitos ( en la plantilla). */
.cf-sec4__title {
/* Mismo ancho máximo que el panel y centrado igual, para que su borde
izquierdo caiga en la misma vertical que el del panel. */
max-width: 1320px;
margin: 0 auto 56px;
font-size: var(--cf-title);
font-weight: 700;
font-style: italic;
line-height: 1.15;
letter-spacing: -0.01em;
text-align: left;
color: var(--cf-text);
}
.cf-sec4__panelwrap {
/* Radio de la muesca. Escala con la pantalla pero con topes, para que el
icono no quede diminuto en móvil ni gigante en monitores grandes. */
--cf-notch: clamp(46px, 6.6vw, 94px);
position: relative;
max-width: 1320px;
margin: 0 auto;
}
/* Fondo del panel: gris con esquinas redondeadas y la muesca recortada con
una máscara radial. Va en su PROPIA capa y no en el contenedor porque la
máscara afecta también a los hijos: si estuviera en el wrapper, recortaría
el icono justo por donde debe verse. */
.cf-sec4__panelbg {
position: absolute;
inset: 0;
background: var(--cf-panel);
border-radius: 37px;
-webkit-mask-image: radial-gradient(circle var(--cf-notch) at 85% 0,
transparent calc(100% - 1px), #000 100%);
mask-image: radial-gradient(circle var(--cf-notch) at 85% 0,
transparent calc(100% - 1px), #000 100%);
}
/* Icono centrado en la muesca, con 15px de separación real con el gris a
cualquier tamaño: su radio es el de la muesca menos ese hueco. */
.cf-sec4__icon {
position: absolute;
z-index: 1;
left: 85%;
top: 0;
width: calc(2 * (var(--cf-notch) - 15px));
height: auto;
transform: translate(-50%, -50%);
animation: cf-latido 3s ease-in-out infinite;
}
/* Luz palpitante tenue. Va con drop-shadow y no con box-shadow: así el halo
sigue el contorno redondo real del icono (canal alfa) en vez de la caja.
Dos sombras superpuestas — una cercana y otra amplia — para que el brillo
se difumine en vez de marcar un borde. */
@keyframes cf-latido {
0%, 100% {
filter: drop-shadow(0 0 4px rgba(0, 83, 255, .30))
drop-shadow(0 0 10px rgba(0, 83, 255, .12));
}
50% {
filter: drop-shadow(0 0 14px rgba(0, 83, 255, .55))
drop-shadow(0 0 30px rgba(0, 83, 255, .28));
}
}
@media (prefers-reduced-motion: reduce) {
.cf-sec4__icon { animation: none; }
}
/* Contenido: dos tercios de texto y un tercio de imagen */
.cf-sec4__content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 2fr 1fr;
gap: clamp(28px, 3.5vw, 56px);
align-items: center;
padding: clamp(36px, 4vw, 64px);
}
/* Cuerpo en Altone Medium (500) y un cuerpo mayor. El panel es CSS, así que
crece solo para acomodarlo. */
.cf-sec4__text p {
margin: 0 0 20px;
font-size: clamp(16px, 1.45vw, 21px);
font-weight: 500;
line-height: 1.6;
color: var(--cf-text);
text-align: justify;
/* Con el texto justificado, la partición evita los "ríos" de espacio
blanco entre palabras largas (implementación, personalización…). */
hyphens: auto;
}
.cf-sec4__text p:last-child { margin-bottom: 0; }
/* Lema en azul y negrita. Igual que .cf-brand-word: la familia no tiene Bold
vertical, así que el 700 en estilo normal resuelve a ExtraBold (800), que
es una cara real de Altone — nada de negrita sintética. */
/* Selector con el `p` incluido: `.cf-sec4__text p` (clase+elemento) le gana en
especificidad a la clase suelta y le imponía su peso 500. */
.cf-sec4__text p.cf-sec4__claim {
font-weight: 700;
color: var(--cf-primary);
letter-spacing: .01em;
}
/* Pegada abajo: en el centro quedaba justo bajo la muesca y se veía apretada
contra ella. Alineada al pie, gana toda esa separación. */
.cf-sec4__media {
align-self: end;
margin-bottom: clamp(24px, 3.5vw, 56px); /* la despega del pie */
}
/* Un poco más grande que su columna: crece hacia la izquierda, invadiendo el
hueco entre columnas, para no salirse del panel por la derecha.
El -12% se recorta a -7% para dejar 20px más de aire con el texto. */
.cf-sec4__media img {
display: block;
width: 107%;
max-width: none;
margin-left: -7%;
height: auto;
transform: translateY(10px); /* 10px más abajo */
}
/* ==========================================================================
SECCIÓN 5 — por ahora solo el panel azul. Es un y no un fondo CSS
porque la sección no lleva contenido dentro: así conserva su proporción
sola y no hay que fijarle alto. Mismo tope de 1320px que el panel de la
sección 4, para que los dos bordes caigan en la misma vertical.
========================================================================== */
.cf-sec5 {
width: 100%;
background: var(--cf-bg);
}
.cf-sec5__inner {
max-width: var(--cf-nav-max);
margin: 0 auto;
padding: 96px 40px;
}
/* El título va ENCIMA del panel, así que este es el contenedor de referencia:
la imagen marca el alto y el título se posiciona en % sobre ella, de modo
que la separación con el borde superior se mantiene al escalar. */
.cf-sec5__panelwrap {
position: relative;
max-width: 1320px;
margin: 0 auto;
}
.cf-sec5__panel {
display: block;
width: 100%;
height: auto;
}
/* Mismo tratamiento que los demás títulos del sitio (Altone Bold Oblique),
pero en blanco porque cae sobre el azul. */
.cf-sec5__title {
position: absolute;
top: 0;
left: 0;
right: 0;
/* Separación = 9% del alto del panel + 20px, pero expresada sobre el
ANCHO: un `top: 9%` se resolvería contra el alto del contenedor, que
incluye las tarjetas, y al apilarse en móvil el título se iba con
ellas. Como el panel mide 3.012:1, ese 9% de su alto equivale a
9/3.012 = 2.99% de su ancho, y los márgenes en % sí van por ancho. */
margin: calc(2.99% + 20px) 0 0;
padding: 0 24px;
font-size: var(--cf-title);
font-weight: 700;
font-style: italic;
line-height: 1.15;
letter-spacing: -0.01em;
text-align: center;
color: var(--cf-on-primary);
}
/* Fila de tarjetas a caballo del borde inferior del panel: la mitad de su
alto queda dentro del azul y la otra mitad sobresale por abajo.
El truco es que van EN FLUJO detrás de la imagen (nada de position:absolute)
y se suben con un margen negativo de medio alto de tarjeta. Así el propio
contenedor ya reserva el sitio de la mitad que sobresale — alto del panel +
media tarjeta — y no hay que compensar a mano ningún padding.
El margen se calcula, no se adivina: los márgenes en % se resuelven contra
el ANCHO del contenedor, igual que el ancho de las columnas, así que la
cuenta se mantiene exacta a cualquier tamaño de pantalla. Las cuatro
imágenes miden 600x931, de ahí el factor 931/600. */
.cf-sec5__cards {
--cf-s5-pad: 4%;
--cf-s5-gap: 2.5%;
--cf-s5-card-w: calc((100% - 2 * var(--cf-s5-pad) - 3 * var(--cf-s5-gap)) / 4);
--cf-s5-card-h: calc(var(--cf-s5-card-w) * 931 / 600);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cf-s5-gap);
padding: 0 var(--cf-s5-pad);
margin-top: calc(var(--cf-s5-card-h) / -2);
}
.cf-sec5__card {
display: block;
width: 100%;
height: auto;
}
/* ==========================================================================
SECCIÓN 6 — llamada a la acción. Banda a sangre con el MISMO gris que el
listón de logotipos (--cf-ribbon), y el contenido alineado al ancho del
header y el hero.
========================================================================== */
.cf-cta {
width: 100%;
background: var(--cf-ribbon);
border-top: 1px solid var(--cf-border);
border-bottom: 1px solid var(--cf-border);
}
.cf-cta__inner {
max-width: var(--cf-nav-max);
margin: 0 auto;
padding: 64px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
/* Altone Bold Oblique, igual que los títulos del sitio. Cuerpo grande: es el
reclamo de la sección, no un pie. El `flex: 1` le da todo el ancho que
sobra tras los botones, que son los que mandan (no se encogen). */
.cf-cta__text {
flex: 1 1 auto;
margin: 0;
font-size: var(--cf-title);
font-weight: 700;
font-style: italic;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--cf-text);
}
/* Cifras de ancho fijo: mientras el contador sube, "1" y "7" ocupan lo mismo
y la línea no baila. */
.cf-cta__count { font-variant-numeric: tabular-nums; }
.cf-cta__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
/* Separación amplia: cada botón lleva halo y con poco hueco los dos
resplandores se tocaban. */
gap: 34px;
}
/* Misma píldora que el CTA del hero, halo incluido: es una copia del propio
botón desenfocada por detrás (::before con z-index:-1), no un box-shadow,
así el resplandor tiene la forma exacta de la píldora. Cada botón brilla de
su color: azul el sólido, blanco el de contorno. */
.cf-cta__btn {
position: relative;
display: inline-flex;
align-items: center;
padding: 16px 40px;
border-radius: 999px;
font-size: 18px;
font-weight: 500;
font-style: italic;
line-height: 1.35;
white-space: nowrap;
isolation: isolate; /* contiene el z-index:-1 del halo */
transition: background .15s ease, color .15s ease;
}
.cf-cta__btn::before {
content: "";
position: absolute;
z-index: -1;
inset: 2px 4px -6px;
border-radius: inherit;
filter: blur(16px);
opacity: .6;
transition: opacity .18s ease, filter .18s ease;
}
.cf-cta__btn:hover::before { opacity: .85; filter: blur(22px); }
.cf-cta__btn--solid {
background: var(--cf-primary);
color: var(--cf-on-primary) !important;
}
.cf-cta__btn--solid::before { background: var(--cf-primary); }
.cf-cta__btn--solid:hover { background: var(--cf-primary-2); }
.cf-cta__btn--ghost {
background: #ffffff;
color: var(--cf-primary) !important;
}
/* El halo blanco necesita más opacidad y menos desenfoque: sobre el gris del
listón, un blanco muy difuminado casi no se ve. */
.cf-cta__btn--ghost::before {
background: #ffffff;
filter: blur(13px);
opacity: .95;
}
.cf-cta__btn--ghost:hover { background: #f4f7ff; }
.cf-cta__btn:focus-visible {
outline: 2px solid var(--cf-primary);
outline-offset: 3px;
}
/* ==========================================================================
CONTACTO — tarjeta partida: mitad azul con los anillos y mitad blanca con
el formulario. Reutiliza el lenguaje del resto del sitio: el cuarto de
anillo del hero, los anillos concéntricos de "¡Nuestros Servicios!" y la
píldora con halo de los CTA.
========================================================================== */
.cf-form {
position: relative;
width: 100%;
background: var(--cf-bg);
}
.cf-form__inner {
position: relative;
z-index: 1;
max-width: var(--cf-max);
margin: 0 auto;
padding: 72px 40px 96px;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
align-items: stretch;
/* Sin gap: las dos mitades se tocan y forman UNA tarjeta. */
}
/* ---------- Mitad azul ---------- */
.cf-form__panel {
position: relative;
overflow: hidden;
border-radius: 28px 0 0 28px;
background: var(--cf-primary);
padding: clamp(32px, 3.4vw, 52px);
display: flex;
align-items: center;
}
.cf-form__rings {
position: absolute;
z-index: 0;
/* Más grande que la caja y descentrado: se ve un trozo de los anillos,
como en el panel de la sección 5, no el dibujo completo centrado. */
left: -30%;
top: -20%;
width: 160%;
height: 140%;
color: rgba(255, 255, 255, .2);
pointer-events: none;
}
.cf-form__panelbody { position: relative; z-index: 1; }
.cf-form__eyebrow {
margin: 0 0 14px;
font-size: 13px;
font-weight: 500;
font-style: italic;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
}
.cf-form__title {
margin: 0 0 18px;
font-size: clamp(30px, 3.1vw, 46px);
font-weight: 700;
font-style: italic;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--cf-on-primary);
}
.cf-form__lead {
margin: 0 0 30px;
font-size: clamp(15px, 1.1vw, 17px);
font-weight: 500;
line-height: 1.55;
color: rgba(255, 255, 255, .88);
}
.cf-form__data { display: flex; flex-direction: column; gap: 10px; }
.cf-form__datum {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 500;
color: var(--cf-on-primary) !important;
}
.cf-form__datum:hover { opacity: .82; }
.cf-form__datumico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
}
/* Todos los iconos al mismo tamaño real. Antes eran glifos de texto y cada
carácter se dibujaba a su aire: la arroba salía grande y el teléfono y el
reloj, diminutos. */
.cf-form__datumico svg {
width: 18px;
height: 18px;
display: block;
}
/* ---------- Mitad blanca ---------- */
.cf-form__card {
border-radius: 0 28px 28px 0;
background: var(--cf-bg);
padding: clamp(28px, 3.4vw, 48px);
box-shadow: 0 40px 80px -50px rgba(16, 24, 40, .55);
}
/* ---------- Campos con etiqueta flotante ---------- */
.cf-fld { position: relative; margin-bottom: 14px; }
.cf-fld__input {
display: block;
width: 100%;
/* El relleno superior deja sitio a la etiqueta cuando sube */
padding: 25px 18px 10px;
border: 1px solid transparent;
border-radius: 16px;
background: #f1f4f9;
font-family: var(--cf-font);
font-size: 16px; /* por debajo de 16px iOS hace zoom al enfocar */
font-weight: 500;
line-height: 1.35;
color: var(--cf-text);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cf-fld__input:hover { background: #eaeef6; }
.cf-fld__input:focus {
outline: none;
background: var(--cf-bg);
border-color: var(--cf-primary);
box-shadow: 0 0 0 4px rgba(0, 83, 255, .13);
}
.cf-fld__label {
position: absolute;
left: 19px;
top: 17px;
font-size: 16px;
font-weight: 500;
color: #8a92a1;
pointer-events: none; /* el clic pasa al campo */
transition: top .16s ease, font-size .16s ease, color .16s ease;
}
/* Sube cuando el campo tiene foco o contenido. `:placeholder-shown` es lo que
detecta el "vacío", y por eso el HTML lleva placeholder=" ".
OJO con el selector: la parte de :placeholder-shown va acotada a input y
textarea A PROPÓSITO. Un