/* Sobre mí and Resumen layouts: Elementor containers and widgets styled by the classes they carry.
   Colours come from the theme, so both light and dark follow the portfolio. */
.pf-cv { --cv-line:var(--line,#172b491b); --cv-soft:color-mix(in srgb,var(--panel-soft,#f2f5fa) 60%,transparent); --cv-ring:color-mix(in srgb,var(--text,#182338) 13%,transparent); --cv-accent:var(--accent,#6495ff); --cv-accent-text:var(--accent-text,var(--accent,#416dde)); color:var(--text,#182338); }
/* Elementor's kit fonts load after this sheet; the site font chosen in Portfolio wins here. */
.pf-cv .elementor-element :is(.elementor-heading-title,.elementor-icon-box-title,.elementor-icon-box-description,.elementor-icon-list-text),.pf-cv .elementor-element.elementor-widget-text-editor { font-family:inherit; }

/* Section titles: the first letter in the accent colour and a line that reaches both edges of the panel. */
.pf-cv .elementor-widget.pf-cv-title { position:relative; padding:38px 0 20px; }
.pf-cv .elementor-widget.pf-cv-title:first-child { padding-top:0; }
.pf-cv .elementor-widget.pf-cv-title:after { content:""; position:absolute; bottom:0; left:calc(-1 * var(--pf-bleed,0px)); right:calc(-1 * var(--pf-bleed,0px)); height:1px; background:var(--cv-line); }
.pf-cv .pf-cv-title .elementor-heading-title { margin:0; color:var(--text,#182338); font-size:22px; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.pf-cv .pf-cv-title .elementor-heading-title::first-letter { color:var(--cv-accent); }

/* Two columns divided by a line; stacked on phones. */
.pf-cv .e-con.pf-cv-split { flex-direction:row; }
.pf-cv .e-con.pf-cv-col { flex:1 1 0; width:auto; min-width:0; padding-block:28px; }
.pf-cv .e-con.pf-cv-col:first-child { padding-inline-end:32px; }
.pf-cv .e-con.pf-cv-col + .e-con.pf-cv-col { padding-inline-start:32px; border-inline-start:1px solid var(--cv-line); }
.pf-cv .pf-cv-text { color:var(--text,#182338); font-size:16px; line-height:1.85; }
.pf-cv .pf-cv-text p { margin:0 0 1em; }
.pf-cv .pf-cv-text p:last-child { margin-bottom:0; }
.pf-cv .pf-cv-text strong { color:var(--text,#182338); font-weight:700; }

/* Data rows: a badge, then text or a set of icons. */
.pf-info-row { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 18px; padding:18px 0; border-bottom:1px solid var(--cv-line,#172b491b); }
.pf-cv .pf-cv-rows .pf-info-row { margin-inline-end:calc(-1 * var(--pf-bleed,0px)); padding-inline-end:var(--pf-bleed,0px); }
.pf-cv .pf-cv-rows > .elementor-widget:first-child .pf-info-row { padding-top:2px; }
.pf-info-label { flex:none; padding:2px 10px; border-radius:5px; background:var(--cv-accent,#6495ff); color:var(--accent-ink,#fff); font-size:12.5px; font-weight:600; line-height:1.6; }
.pf-info-value { min-width:0; margin-inline-start:auto; color:var(--text,#182338); font-size:15.5px; line-height:1.6; text-align:end; overflow-wrap:anywhere; }
.pf-info-icons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; max-width:250px; margin:0; padding:0; list-style:none; }
.pf-info-text + .pf-info-icons { margin-top:10px; }
.pf-info-icons li { display:grid; place-items:center; width:38px; height:38px; margin:0; border:1px solid var(--cv-line,#172b491b); border-radius:11px; background:color-mix(in srgb,var(--cv-accent,#6495ff) 12%,transparent); color:var(--cv-accent-text,#416dde); font-size:19px; transition:background-color .3s ease,border-color .3s ease; }
/* The chip itself stays put so a pointer on its edge never loses it; only the drawing moves. */
.pf-info-icons li:hover { border-color:color-mix(in srgb,var(--cv-accent,#6495ff) 45%,transparent); background:color-mix(in srgb,var(--cv-accent,#6495ff) 24%,transparent); }
.pf-info-icons svg { display:block; width:19px; height:19px; fill:currentColor; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.pf-info-icons li:hover :is(svg,i) { transform:translateY(-2px) scale(1.15); }

/* Skill cards with an icon in a circle. */
.pf-cv .e-con.pf-cv-cards { padding-block:28px; }
/* The widget holds the place and receives the pointer; the box inside rises, so its edge never shakes. */
.pf-cv .elementor-widget.pf-cv-card,.pf-cv .pf-cv-card > .elementor-widget-container { height:100%; }
.pf-cv .pf-cv-card .elementor-icon-box-wrapper { height:100%; padding:28px; border:1px solid var(--cv-line); border-radius:18px; background:var(--cv-soft); transition:transform .45s cubic-bezier(.34,1.56,.64,1),border-color .3s ease,box-shadow .3s ease; }
.pf-cv .pf-cv-card:hover .elementor-icon-box-wrapper { transform:translateY(-4px); border-color:color-mix(in srgb,var(--cv-accent) 45%,var(--cv-line)); box-shadow:0 18px 40px -24px color-mix(in srgb,var(--cv-accent) 80%,transparent); }
.pf-cv .pf-cv-card .elementor-icon-box-icon .elementor-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:color-mix(in srgb,var(--cv-accent) 14%,transparent); color:var(--cv-accent-text); fill:var(--cv-accent-text); font-size:26px; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.pf-cv .pf-cv-card:hover .elementor-icon-box-icon .elementor-icon { transform:rotate(-8deg) scale(1.06); }
.pf-cv .pf-cv-card .elementor-icon-box-title { margin:0 0 10px; margin-block-start:0; color:var(--text,#182338); font-size:17px; font-weight:700; line-height:1.35; }
.pf-cv .pf-cv-card .elementor-icon-box-description { color:var(--text,#182338); font-size:15.5px; line-height:1.8; }

/* Personal notes: icon and text in columns divided by lines. */
.pf-cv .e-con.pf-cv-facts { overflow:hidden; }
.pf-cv .elementor-widget.pf-cv-fact { margin-inline-start:-1px; padding:30px 18px; border-inline-start:1px solid var(--cv-line); }
.pf-cv .pf-cv-fact .elementor-icon-box-icon .elementor-icon { color:var(--cv-accent-text); fill:var(--cv-accent-text); font-size:32px; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.pf-cv .pf-cv-fact:hover .elementor-icon-box-icon .elementor-icon { transform:translateY(-4px) scale(1.1); }
.pf-cv .pf-cv-fact .elementor-icon-box-description { color:var(--text,#182338); font-size:15.5px; line-height:1.55; }

/* Column headings with an icon, such as Experiencia laboral. */
.pf-cv .elementor-widget.pf-cv-subhead { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--cv-line); }
.pf-cv .pf-cv-subhead .elementor-icon-box-wrapper { align-items:center !important; }
.pf-cv .pf-cv-subhead .elementor-icon-box-icon .elementor-icon { color:var(--cv-accent-text); fill:var(--cv-accent-text); font-size:24px; }
.pf-cv .pf-cv-subhead .elementor-icon-box-title { margin:0; color:var(--text,#182338); font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

/* Timeline entries: a line with a dot, as a card or as a plain row. */
.pf-timeline { --pf-timeline-accent:var(--cv-accent-text,#416dde); position:relative; padding-inline-start:30px; }
.pf-timeline:before { content:""; position:absolute; top:0; bottom:0; inset-inline-start:5px; width:1px; background:color-mix(in srgb,var(--text,#182338) 16%,transparent); }
.pf-timeline-dot { position:absolute; top:30px; inset-inline-start:0; width:11px; height:11px; border-radius:50%; background:var(--pf-timeline-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--pf-timeline-accent) 22%,transparent); }
.pf-timeline--plain .pf-timeline-dot { top:27px; background:color-mix(in srgb,var(--text,#182338) 45%,transparent); box-shadow:none; }
.pf-timeline--card .pf-timeline-body { margin-bottom:20px; padding:24px; border:1px solid var(--cv-line,#172b491b); border-radius:18px; background:var(--cv-soft); transition:transform .45s cubic-bezier(.34,1.56,.64,1),border-color .3s ease; }
.pf-timeline--card:hover .pf-timeline-body { transform:translateX(4px); border-color:color-mix(in srgb,var(--pf-timeline-accent) 45%,transparent); }
.pf-timeline--plain .pf-timeline-body { padding:20px 0 22px; border-bottom:1px solid var(--cv-line,#172b491b); }
/* A logo never squeezes the title: when the column is narrow it moves below the heading. Words break
   only when a single one does not fit, not letter by letter. */
.pf-timeline-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 16px; }
.pf-timeline-heading { flex:1 1 170px; min-width:0; overflow-wrap:break-word; }
.pf-timeline-date { display:inline-block; white-space:nowrap; margin-bottom:10px; padding:1px 8px; border:1px solid var(--pf-timeline-accent); border-radius:5px; color:var(--pf-timeline-accent); font-size:12.5px; line-height:1.6; }
.pf-timeline--plain .pf-timeline-date { border-color:color-mix(in srgb,var(--text,#182338) 28%,transparent); color:var(--muted,#53627c); }
.pf-timeline-title { margin:0; color:var(--text,#182338); font-family:inherit; font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
.pf-timeline-place { margin:4px 0 0; color:var(--muted,#53627c); font-size:13px; }
.pf-timeline-logo { flex:none; width:auto; max-width:110px; height:auto; max-height:56px; object-fit:contain; }
.pf-timeline-text { margin-top:16px; overflow-wrap:break-word; color:var(--text,#182338); font-size:15.5px; line-height:1.8; }
.pf-timeline-text p { margin:0 0 .6em; }
.pf-timeline-text > :last-child { margin-bottom:0; }
.pf-timeline-link { display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--text,#182338); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.pf-timeline-link:hover { color:var(--pf-timeline-accent); text-decoration:none; }
.pf-timeline-link span { font-size:16px; line-height:1; transition:transform .3s ease; }
.pf-timeline-link:hover span { transform:translateX(4px); }

/* Skill rings: the ring fills to the level and the number counts up when the card comes into view. */
.pf-cv .e-con.pf-cv-skills { padding-block:28px; }
.pf-skill { --pf-skill-color:var(--cv-accent,#6495ff); display:flex; flex-direction:column; align-items:center; gap:12px; height:100%; padding:22px 12px 18px; border:1px solid var(--cv-line,#172b491b); border-radius:18px; background:var(--cv-soft); text-align:center; transition:transform .45s cubic-bezier(.34,1.56,.64,1),border-color .3s ease,box-shadow .3s ease; }
/* The widget around the card receives the pointer, so a pointer on the card's edge never shakes it. Its target
   reaches a little past the card, so the panel's own tilt cannot slide the edge out from under the pointer. Only a
   ring outside the card is added, so links and text inside it stay reachable. */
.pf-cv .elementor-widget-portfolio-skill:after,.pf-cv .elementor-widget.pf-cv-card:after { content:""; position:absolute; inset:-6px; clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,6px 6px,6px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 6px,6px 6px); }
.elementor-widget-portfolio-skill:hover .pf-skill { transform:translateY(-4px); border-color:color-mix(in srgb,var(--pf-skill-color) 45%,transparent); box-shadow:0 16px 34px -22px var(--pf-skill-color); }
.pf-skill-ring { position:relative; display:grid; place-items:center; align-content:center; gap:3px; width:96px; height:96px; }
.pf-skill-ring > svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.pf-skill-ring circle { fill:none; stroke-width:6; }
.pf-skill-track { stroke:var(--cv-ring,#18233822); }
.pf-skill-meter { stroke:var(--pf-skill-color); stroke-linecap:round; stroke-dasharray:100px; stroke-dashoffset:calc((100 - var(--pf-value,0)) * 1px); transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1); }
/* Emptying is instant, so only the fill animates. */
.pf-skill[data-pf-pending] .pf-skill-meter { stroke-dashoffset:100px; transition:none; }
.pf-skill-logo { position:relative; display:grid; place-items:center; height:32px; color:var(--text,#182338); font-size:30px; line-height:1; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.elementor-widget-portfolio-skill:hover .pf-skill-logo { transform:scale(1.12); }
.pf-skill-logo svg { display:block; width:30px; height:30px; fill:currentColor; }
.pf-skill-image { display:block; width:32px; height:32px; object-fit:contain; }
.pf-skill-value { position:relative; color:var(--text,#182338); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.pf-skill-name { color:var(--text,#182338); font-size:15px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }

/* Languages with a ten-step level. */
.pf-language { display:flex; align-items:center; gap:16px; padding:10px 0; }
.pf-language-flag { display:grid; place-items:center; flex:none; width:56px; height:56px; overflow:hidden; border:1px solid var(--cv-line,#172b491b); border-radius:15px; background:var(--cv-soft); }
.pf-language-image { display:block; width:36px; height:36px; object-fit:cover; border-radius:7px; }
.pf-language-code { color:var(--cv-accent-text,#416dde); font-size:14px; font-weight:800; letter-spacing:.06em; }
.pf-language-body { min-width:0; }
.pf-language-name { display:block; margin-bottom:6px; color:var(--text,#182338); font-size:16px; font-weight:600; }
.pf-language-level { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pf-language-dots { display:flex; gap:7px; }
.pf-language-dots i { width:12px; height:12px; border-radius:50%; background:var(--cv-ring,#18233822); }
.pf-language-dots i.is-on { background:var(--pf-language-color,var(--cv-accent,#6495ff)); }
.pf-language-value { color:var(--text,#182338); font-size:12.5px; font-weight:700; }

/* Knowledge checklist. */
.pf-cv .pf-cv-checks .elementor-icon-list-items { display:grid; gap:12px; }
.pf-cv .pf-cv-checks .elementor-icon-list-item { margin:0; padding:0; }
.pf-cv .pf-cv-checks .elementor-icon-list-icon { color:var(--cv-accent-text); fill:var(--cv-accent-text); }
.pf-cv .pf-cv-checks .elementor-icon-list-icon svg { width:16px; height:16px; fill:currentColor; }
.pf-cv .pf-cv-checks .elementor-icon-list-text { padding-inline-start:12px; color:var(--text,#182338); font-size:15.5px; }

@media (max-width:767px) {
  .pf-cv .e-con.pf-cv-split { flex-direction:column; }
  .pf-cv .e-con.pf-cv-col:first-child { padding-inline-end:0; }
  .pf-cv .e-con.pf-cv-col + .e-con.pf-cv-col { padding-inline-start:0; border-inline-start:0; border-top:1px solid var(--cv-line); }
  .pf-cv .pf-cv-card .elementor-icon-box-wrapper { padding:22px; }
  .pf-info-icons { max-width:none; }
}
.pf-fx-scope[data-motion=off] :is(.pf-skill-meter,.pf-skill,.pf-cv-card .elementor-icon-box-wrapper,.pf-timeline-body,.pf-info-icons svg) { transition:none; }